我有问题。其他人的问题的答案并没有解决我的问题。
这是关于我标题中的图像,这是代码:
HTML
<div id="site">
<div id="header">
<img class="center" src="http://i.imgur.com/jfDhpP5.png"/>
</div>
<div id="mainNav">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
</div>
</div>
CSS
#container{
width: 1000px;
margin: 1em auto;
}
#header{
display: block;
width: 1000px;
margin: 0 auto;
}
body{
background-color: grey;
color: black;
font-family: sans-serif;
}
img.center{
text-align:center;
margin: 0 auto;
padding:0px;
}
我也试试这个:
div#pictures {
text-align: center;
}
也无法正常工作...在firefox和IE中检查,最新版本.... o.O
请帮忙!
答案 0 :(得分:7)
header
width:100%;
text-align:center;
您的img
display:inline-block;
margin: 0 auto;
也就是说,只有text-align:center;
header
才能找到,as in here
答案 1 :(得分:0)
要添加到SW4的答案中,有多种方法可以使文本与CSS对齐。
div.a {
text-align: center;
}
div.b {
text-align: left;
}
div.c {
text-align: right;
}
div.d {
text-align: justify;
}
对于任何正在寻找入门资源的人,我推荐的是W3Schools。
答案 2 :(得分:0)
多亏了SW4的回答,我在标头图片方面遇到了类似的问题。我使用的是矩形图像,还试图使其变为圆形。固定图像形状并调整大小后,我在将居中位置放在一个位置时遇到了问题。
这是我的代码...
HTML:
<div class= "image-cropper">
<img src="#" class="profile-pic">
</div>
CSS:
.image-cropper {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
border-radius: 50%;
display:inline-block;
margin: 0 auto;
}
.profile-pic {
display: inline;
margin: 0 auto;
margin-left: -15%; /*centers the image*/
height: auto;
width: 250px;
}
-有人可能有更好的编码方法,但是经过几次尝试并弄乱了px和%之后,我终于明白了我的意图。