CODEWITHSUNDEEP
htmlcss
Geoff
Geoff

Reputation: 2491

How do I first center an image and then vertically center text on either side of that image?

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!

Upvotes: 0

Views: 85

Answers (3)

J. Nilles
J. Nilles

Reputation: 87

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>

Upvotes: 0

Asons
Asons

Reputation: 87251

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>

Upvotes: 1

bullzito
bullzito

Reputation: 357

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>

Upvotes: 1

Related Questions