尝试使用 CSS 将图片移动到页面的中心。我将这些值应用于图像,但没有成功。见下面的代码:
HTML:
<div class="list_of_reviews">
<ul style="list-style-type:none">
<li>What will happen to Brittish travelers when Brexit finaly happens</li>
</ul>
</div>
<img class="image_1" src="for left column.jpg" alt="What will happen to Brittish travelers when Brexit finaly happens"/>
CSS:
.list_of_reviews {
margin:80px auto;
font-family: "Times New Roman", Times, Serif;
line-height: 1.5;
font-size: 30px;
width: 40%;
border:solid;
}
.image_1 {
margin:auto;
height:200px;
width:350px;
position:relative;
}
非常感谢直截了当的回答,请不要降级。
最佳答案
要使 margin: 0 auto
正常工作,您需要添加 display: block
。
.list_of_reviews {
margin: 80px auto;
font-family: "Times New Roman", Times, Serif;
line-height: 1.5;
font-size: 30px;
width: 40%;
border: solid;
}
.image_1 {
display: block;
margin: auto;
height: 200px;
width: 350px;
position: relative;
}
<div class="list_of_reviews">
<ul style="list-style-type:none">
<li>What will happen to Brittish travelers when Brexit finaly happens</li>
</ul>
</div>
<img class="image_1" src="http://placehold.it/350x200" alt="What will happen to Brittish travelers when Brexit finaly happens" />
编辑:
其实...
Don't change the default behavior of an element if you can avoid it. Keep elements in the natural document flow as much as you can.
由于默认情况下图像的行为类似于文本,因此最好这样做:
.list_of_reviews {
margin: 80px auto;
font-family: "Times New Roman", Times, Serif;
line-height: 1.5;
font-size: 30px;
width: 40%;
border: solid;
}
figure {
text-align: center;
}
.image_1 {
height: 200px;
width: 350px;
position: relative;
}
<div class="list_of_reviews">
<ul style="list-style-type:none">
<li>What will happen to Brittish travelers when Brexit finaly happens</li>
</ul>
</div>
<figure>
<img class="image_1" src="for left column.jpg" alt="What will happen to Brittish travelers when Brexit finaly happens" />
</figure>
关于html - 即使自动应用边距,图像也不居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39089363/