使用CSS将图片放入目录中
使用CSS将图片放入目录中
提问于 2014-05-04 18:58:04
我最近开始学习HTML和CSS。为了练习我学到的东西，我正在我的电脑上建立一个网站。现在，我希望主页是一个网站的目录表，链接到网站的其他部分，在两列被分割的图片在页面的中心。下面的代码几乎可以工作，因为它确实设置了页面左侧和右侧的两列。然而，无论我尝试什么，我都不能让图片停留在页面的中间。早些时候，我尝试使用边距和宽度属性的混合进入死中心，但是如果缩小页面，它就不会停留在中间(我仍然设置了带有display:inline的图像，所以这可能解释了这一点，但这是我能够在一行中获得列和图像的唯一方法)。我还尝试了不同的变化，使用保证金设置为自动和使用浮动设置为中心。
如何将页面设置为在图像的每一侧都有一列链接，并且所有链接都在一个容器中？
到目前为止，我对目录部分的代码如下：
<div class="Table-of-Contents">
<ul class="ToCLeft-Column">
<li> <a href="About_Me/info.html">A Little bit about my life</a> </li>
<li><a href="My_Family/index.html">This is my family</a></li>
<li><a href="Mental_Health_Wonderland/info.html">On a more serious note</a>
</li>
</ul>
<img src="images/try_science.png" alt="Test Center" class="Center-Image"/>
<ul class="ToCRight-Column">
<li><a href="My_Interests/info.html">My Interests</a></li>
<li><a href="Contact/Contact_Me.html">If you want to get in touch with me</a>
</li>
</ul>
</div>以及相应的CSS：
.ToCLeft-Column{
display: inline;
float: left;
}
.Center-Image{
display: inline;
width: 100 px;
margin: 10 px auto 10 px auto;
text-align:center;
}
.ToCRight-Column{
display: inline;
float: right
}回答 2
Stack Overflow用户
回答已采纳
发布于 2014-05-04 19:39:45
若要将表对齐到页的中心，
- 在表外创建一个容器。
- 将其添加到表的css：
margin : 0px auto;中
这只会使表与页面的中心对齐。要使图像与表的中心对齐，给出两个uls的等宽。
下面是演示：http://jsfiddle.net/HdNgJ/9/
现在，构建一个看起来整洁的页面，即使是在页面上，缩小到移动屏幕的程度也是另一种游戏。它被称为建立一个响应性的设计。
Stack Overflow用户
发布于 2014-05-04 19:18:38
使用此css
.ToCLeft-Column{
display: inline;
float: left;
}
.Center-Image{
display: inline;
width: 100 px;
margin: 10px;
text-align:center;
float: left;
}
.ToCRight-Column{
display: inline;
float: left;
}我希望你已经给你所有的专栏适当的宽度了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23460287
复制相关文章
相似问题
腾讯云开发者
