[英]How do I place an image centered in a DIV and text to the right? Overflow problems
I have a div
container where I want to put in a centered image and a small description to the right. 我有一个
div
容器,我想在其中放置居中的图像,并在右侧添加一个小说明。 The specifications are: 规格为:
I've tried using a table
in the container and using div
s, but I can't find a clean solution. 我尝试在容器中使用
table
并使用div
,但是找不到干净的解决方案。 I can show you the non-working code I've tried on request. 我可以向您展示我已根据要求尝试的无效代码。
This one was a tricky one. 这是一个棘手的问题。 The actual tags used don't really matter, just the number of elements and how they are nested.
实际使用的标签并不重要,仅涉及元素的数量及其嵌套方式。
The vertical centering of the text is done via Flexbox, which has limited support (Chrome, IE10, Opera, Safari, most mobile browsers). 文本的垂直居中是通过Flexbox完成的,Flexbox支持有限(Chrome,IE10,Opera,Safari,大多数移动浏览器)。 Firefox (with 2009 Flexbox properties) would normally be lumped in here, but it has a bug that prevents Flexbox from working if it is applied to an absolutely positioned element.
Firefox(具有2009 Flexbox属性)通常会放在此处,但是它有一个错误,如果将Flexbox应用于绝对定位的元素,它会阻止Flexbox正常工作。
http://cssdeck.com/labs/iu0gx2wk http://cssdeck.com/labs/iu0gx2wk
Markup: 标记:
<div class="gallery">
<article>
<h1>My image title</h1>
<img src="http://placekitten.com/640/480" alt="A really cute kitten" />
</article>
</div>
CSS: CSS:
.gallery {
padding: 0 230px;
text-align: center;
}
article {
display: inline-block;
max-width: 100%;
position: relative;
}
img {
max-width: 100%;
vertical-align: text-bottom;
}
h1 {
position: absolute;
text-align: left;
right: -230px;
top: 0;
bottom: 0;
width: 200px;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
Alternately, you could add one extra element and use the table/table-cell display properties to get your vertical centering. 或者,您可以添加一个额外的元素,并使用表格/表格单元格显示属性获取垂直居中。
http://cssdeck.com/labs/lqgjgghw http://cssdeck.com/labs/lqgjgghw
Markup 标记
<div class="gallery">
<article>
<h1><span>My image title</span></h1>
<img src="http://placekitten.com/640/480" alt="A really cute kitten" />
</article>
</div>
CSS CSS
.gallery {
padding: 0 230px;
text-align: center;
}
article {
display: inline-block;
max-width: 100%;
position: relative;
}
img {
max-width: 100%;
vertical-align: text-bottom;
}
h1 {
position: absolute;
text-align: left;
right: -230px;
top: 0;
bottom: 0;
width: 200px;
margin: 0;
display: table;
}
h1 span {
display: table-cell;
vertical-align: middle;
}
* note that the demos have their padding/positioning off by a little bit, the code listed here is correct. *请注意,这些演示的填充/位置有些偏离,此处列出的代码是正确的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.