CODEWITHSUNDEEP
htmlcssimage
arunoday singh
arunoday singh

Reputation: 222

how to align image to center according to the text

i want my image to be vertically align to center with respect to the left hand side text such that when the screen size changes the images still remains at the center with respect to the text. i tried using vertical-align:middle but nothing works.

#content .col {
  float: left;
  width: 50%;
  padding: 10px;
  background: white;
  font-size: 19px;
}

#content .col {
  height: 1000px;
}

#content .col img {
  float: right;
  vertical-align: bottom;
}

.skills {
  font-weight: bold;
  list-style: none;
}

.skills li:before {
  margin: 10px;
  /*  content: '✓';*/
  color: forestgreen;
  content: "\2714\0020";
}
<div id="content">
  <div class="col  imgcol">
    <img class="responsive-img circle" src="img/bg.jpg" style="vertical-align:bottom">
  </div>
  <div class="col  textcol">
    <p><b>hello this is some text.this is some text.this is some text.this is some text.</b></p>
    <p>this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some
      text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is
      some text.this is some text.this is some text.this is some text.this is some text.</p>
    <ul class="skills">
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
    </ul>
  </div>

Upvotes: 2

Views: 67

Answers (2)

Bhuwan
Bhuwan

Reputation: 16855

vertical-align works with display:inline-block and table-cell, not with floats...

So better to try Flexbox here

#content {
  display: flex;
  align-items: center;
}

#content .col {
  width: 50%;
  padding: 10px;
  background: white;
  font-size: 19px;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

.skills {
  font-weight: bold;
  list-style: none;
}

.skills li:before {
  margin: 10px;
  /*  content: '✓';*/
  color: forestgreen;
  content: "\2714\0020";
}
<div id="content">
  <div class="col  imgcol">
    <img class="responsive-img circle" src="http://via.placeholder.com/350x150">
  </div>
  <div class="col  textcol">
    <p><b>hello this is some text.this is some text.this is some text.this is some text.</b></p>
    <p>this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some
      text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is
      some text.this is some text.this is some text.this is some text.this is some text.</p>
    <ul class="skills">
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
    </ul>
  </div>

Using inline-block with vertical-align...I have used font-size:0 to the parent to remove the space between the inline elements

#content {
  font-size: 0;
}

#content .col {
  font-size: initial;
  width: 50%;
  display: inline-block;
  padding: 10px;
  background: white;
  font-size: 19px;
  vertical-align: middle;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

.skills {
  font-weight: bold;
  list-style: none;
}

.skills li:before {
  margin: 10px;
  /*  content: '✓';*/
  color: forestgreen;
  content: "\2714\0020";
}
<div id="content">
  <div class="col  imgcol">
    <img class="responsive-img circle" src="http://via.placeholder.com/350x150">
  </div>
  <div class="col  textcol">
    <p><b>hello this is some text.this is some text.this is some text.this is some text.</b></p>
    <p>this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some
      text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is
      some text.this is some text.this is some text.this is some text.this is some text.</p>
    <ul class="skills">
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
    </ul>
  </div>

Upvotes: 2

Luffy
Luffy

Reputation: 30

Try adding this to your CSS codes:

.col.imgcol { display: block; text-align:center; }

This should fix your issue because this element is the parent of your image. Therefore, if you set this as a block and all its content to the center, the image will go to the center, and whenever the screen gets smaller or bigger it will still stay in the middle.

Hope this works for you!

Regards.

Upvotes: 0

Related Questions