如何首先居中放置图像，然后在该图像的任一侧垂直居中放置文本？

Question

I want to do two things:

1. Center an image on a page horizontally.
2. Write text on both sides of the image.
   • On the right side, the text should be left-aligned, and on the left side, it should be right-aligned.
   • Each chunk of text should be vertically centered with respect to the image.

Here's the code I've got so far, but I just can't quite get it to work:

 <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> 

How can I fix this to achieve what I want? Thanks!

Answer 1

Here is one way to do it using display flex on the parent element.

 .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> 

Answer 2

Here is a cleaned up version of your sample

 .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> 

And here is a cleaned up flex version

 .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> 

Answer 3

Try using 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>