问题
出于某种原因,如果标题太长,它会导致图像及其下方的标题文本移动到最左侧。我该如何解决这个问题?
如果有人能给我提供使 img
、h3
和 h4
水平居中的 css,将不胜感激!
代码
html
<div class="form-screen form-photo">
<button class="close close-form"><span class="icon-x"></span></button>
<div class="form-wrapper">
<h1>Title</h1>
<h2>Date created</h2>
<img src="images/Beauty Gurus/Karen Yeung.jpg" alt="Karen Yeung" id="2">
<!--if the caption is too long the image does not center-->
<h3>EDIT: VIDEO IS LIVE!!!! Ok Night ? Owls Or Early ? Birds?! Are You Awake? My Jet Lag Is Screwing My Up And I</h3>
<h4>Credit</h4>
</div>
</div>
CSS
/*Style form photo*/
.form-photo .form-wrapper{
display: table;
margin: 0 auto;
}
.form-photo h3, .form-photo h4{
font-weight: 300;
font-size: 2em;
text-transform: capitalize;
vertical-align: middle;
}
.form-photo h2{
margin-bottom: 20px;
}
.form-photo h3{
font-size: 2em;
}
.form-photo h4{
font-size: 1.5em;
}
.form-photo img{
width: 500px;
}
最佳答案
您需要限制文本的宽度以匹配图像的宽度,或者您可以只限制父级的宽度,并将图像设置为 width: 100%
。
.form-photo .form-wrapper{
display: table;
margin: 0 auto;
width: 500px;
table-layout: fixed;
}
.form-photo h3, .form-photo h4{
font-weight: 300;
font-size: 2em;
text-transform: capitalize;
vertical-align: middle;
}
.form-photo h2{
margin-bottom: 20px;
}
.form-photo h3{
font-size: 2em;
}
.form-photo h4{
font-size: 1.5em;
}
.form-photo {
width: 100%;
}
<div class="form-screen form-photo">
<button class="close close-form"><span class="icon-x"></span></button>
<div class="form-wrapper">
<h1>Title</h1>
<h2>Date created</h2>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="Karen Yeung" id="2">
<h3>EDIT: VIDEO IS LIVE!!!! Ok Night ? Owls Or Early ? Birds?! Are You Awake? My Jet Lag Is Screwing My Up And I</h3>
<h4>Credit</h4>
</div>
</div>
关于html - 如果文本太长,为什么图像不居中? (使用显示 : table; margin: 0 auto; to horizontally center),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43060653/