如何首先将图像居中放置，然后在图像两侧垂直居中放置文字？
问题描述：
我想做两件事：如何首先将图像居中放置，然后在图像两侧垂直居中放置文字？
- 水平居中图像在页面上。在映像的两个双方
- 写入文本。
- 在右侧，文本应该是左对齐，并在左侧，它应该是右对齐。
- 文本的每个块应垂直居中相对于所述图像。
这里是到目前为止，我已经得到了代码，但我不能完全得到它的工作：
<div>
<div style="vertical-align: middle; float: left; text-align: right;">
<strong style="font-size: large;">Credentials</strong>
<ul>
<li>dsadsad</li>
<li>cxzcxzc</li>
<li>hgfhgfhg</li>
<li>uytuty</li>
<li>eqwewqeqwewq</li>
</ul>
</div>
<div style="text-align: center; display: inline-block;">
<a href="https://i.imgur.com/XIlpRN5.jpg"><img style="height: 400px; width: auto;" src="https://i.imgur.com/XIlpRN5.jpg" /></a>
</div>
<div style="vertical-align: middle; float: left; text-align: left;">
<strong style="font-size: large;">Likes</strong>
<ul>
<li>dsadsadsa</li>
<li>cxzcxzc</li>
<li>gdgfdgfdgdf</li>
<li>jhjghjhgj</li>
<li>ouioiuoiuo</li>
<li>..,m/.m,.m,</li>
<li>opupoiuyuyi</li>
<li>adsaeqw421312</li>
<li>4356436546</li>
</ul>
</div>
</div>我怎样才能解决这实现我想要的？谢谢！
答
下面是使用父元素显示器挠性做到这一点的方法之一。
.row {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.clear {
clear:both;
}
.clear:before, .clear:after {
content:"";
display:table;
}
.clear:after { clear:both; }
.column {
float: left;
width: 33.333%;
border: 1px solid #ccc;
box-sizing: border-box;
text-align: center;
}
.column img {
max-width: 100%;
}
.column:first-of-type {
text-align: right;
}
.column:last-of-type {
text-align: left;
}<div class="row clear">
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae magnam distinctio vel necessitatibus vero quaerat soluta ducimus, amet minima consequuntur nulla! Inventore maiores suscipit minus animi corporis porro illo quaerat!</p>
</div>
<div class="column">
<img src="http://i.imgur.com/I9QJ2wP.png">
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae magnam distinctio vel necessitatibus vero quaerat soluta ducimus, amet minima consequuntur nulla! Inventore maiores suscipit minus animi corporis porro illo quaerat!</p>
</div>
</div>+1
非常好！这似乎完全符合我的需要。 – Geoff
答
这是你的样品
.table {
display: table;
width: 100%;
}
.cell {
display: table-cell;
padding: 10px;
width: 33%;
vertical-align: middle;
}
.cell:first-child {
text-align: left;
}
.cell:last-child {
text-align: right;
}
.font-large {
font-size: large;
font-weight: bold;
}
.img {
height: 400px;
width: auto;
}<div class="table">
<div class="cell">
<span class="font-large">Credentials</span>
<ul>
<li>dsadsad</li>
<li>cxzcxzc</li>
<li>hgfhgfhg</li>
<li>uytuty</li>
<li>eqwewqeqwewq</li>
</ul>
</div>
<div class="cell">
<a href="https://i.imgur.com/XIlpRN5.jpg"><img class="img" src="https://i.imgur.com/XIlpRN5.jpg" /></a>
</div>
<div class="cell">
<span class="font-large">Likes</span>
<ul>
<li>dsadsadsa</li>
<li>cxzcxzc</li>
<li>gdgfdgfdgdf</li>
<li>jhjghjhgj</li>
<li>ouioiuoiuo</li>
<li>..,m/.m,.m,</li>
<li>opupoiuyuyi</li>
<li>adsaeqw421312</li>
<li>4356436546</li>
</ul>
</div>
</div>的清理版本这里是一个清理flex版本
.table {
display: flex;
align-items: center;
width: 100%;
}
.cell {
padding: 10px;
width: 33%;
}
.cell:first-child {
text-align: left;
}
.cell:last-child {
text-align: right;
}
.font-large {
font-size: large;
font-weight: bold;
}
.img {
height: 400px;
width: auto;
}<div class="table">
<div class="cell">
<span class="font-large">Credentials</span>
<ul>
<li>dsadsad</li>
<li>cxzcxzc</li>
<li>hgfhgfhg</li>
<li>uytuty</li>
<li>eqwewqeqwewq</li>
</ul>
</div>
<div class="cell">
<a href="https://i.imgur.com/XIlpRN5.jpg"><img class="img" src="https://i.imgur.com/XIlpRN5.jpg" /></a>
</div>
<div class="cell">
<span class="font-large">Likes</span>
<ul>
<li>dsadsadsa</li>
<li>cxzcxzc</li>
<li>gdgfdgfdgdf</li>
<li>jhjghjhgj</li>
<li>ouioiuoiuo</li>
<li>..,m/.m,.m,</li>
<li>opupoiuyuyi</li>
<li>adsaeqw421312</li>
<li>4356436546</li>
</ul>
</div>
</div>
答
尝试使用flexboxes。
CSS + HTML：
body > div {
display: flex;
flex-flow: horizontal;
align-items: center;
justify-items: space-around;
justify-content: center;
flex-wrap: no-wrap;
/* For IE 10, 11 */
display: -ms-flexbox;
flex-direction: row;
-ms-flex-wrap: nowrap;
-ms-flex-pack: center;
-ms-flex-align: center;
}
ul{ list-style: none; padding-left: 0;}
body > div > div {margin: 10px;}<div>
<div style="text-align: right;">
<strong style="font-size: large;">Credentials</strong>
<ul>
<li>dsadsad</li>
<li>cxzcxzc</li>
<li>hgfhgfhg</li>
<li>uytuty</li>
<li>eqwewqeqwewq</li>
</ul>
</div>
<div style="text-align: center; display: inline-block;">
<a href="image.jpg">
<img src="http://placekitten.com/500/440" style="height: 400px; width: auto;" src="image.jpg" /></a>
</div>
<div style="text-align: left;">
<strong style="font-size: large;">Likes</strong>
<ul>
<li>dsadsadsa</li>
<li>cxzcxzc</li>
<li>gdgfdgfdgdf</li>
<li>jhjghjhgj</li>
<li>ouioiuoiuo</li>
<li>..,m/.m,.m,</li>
<li>opupoiuyuyi</li>
<li>adsaeqw421312</li>
<li>4356436546</li>
</ul>
</div>
</div>
把你的代码中http://jsfiddle.net/ – Ferrrmolina
我把我的代码BLOB成一个片段。 – Geoff