CODEWITHSUNDEEP
htmlcss
rjb3580
rjb3580

Reputation: 21

Image and Text Positioning HTML

I am trying to create a setup mimicking the one in the link with an image, text and a border all horizontally and vertically centered. I've tried a number of different ideas.

The below is the closest I've gotten but even then I'm still experiencing issues with the border displaying and things not being centered the way I want them.

<div style="max-width: 800px; height border: 1px solid #c6c6c6; border-radius: 5px; padding: 35px; margin-left: 60px; float: center; height: 220px; display: inline-block;">
     <a href="www.google.com" target="_blank"><img src="image.gif" /></a>
</div>
<div style="height: 220px; display: inline-block;">
     <div style="position: relative; top: 50%;">
         <h4 style="text-align: center;">Text 1/h4>
         <p style="text-align: center;">Text 2<br />Text 3</p>
     </div>
</div>

enter image description here

Upvotes: 2

Views: 63

Answers (2)

whatever
whatever

Reputation: 342

you should put inline-block on image and the parent div of text panel and vertical-align:middle .. would do that 

   .textpane{
            height: 220px;
            display: inline-block; 
            vertical-align:middle;
   }
   .imagepane{
             width:50px;  
             height:50px;
             display:inline-block;
             vertical-align:middle;
             max-width: 800px; 
             border: 1px solid #c6c6c6;
             border-radius:  5px;
             padding: 35px;
             margin-left: 60px;
             height: 220px;
   }
  <div class='imagepane'>
      <a href="www.google.com" target="_blank"><img src="image.gif" /></a>
  </div>
  <div class='textpane'>
  <div style="position: relative; top: 50%;">
     <h4 style="text-align: center;">Text 1/h4>
     <p style="text-align: center;">Text 2<br />Text 3</p>
  </div>
  </div>

jsfiddle

Note there is not such thing as float:center;

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

I would try using CSS tables, put the image and the text in separate block level elements that use display: table-cell, all of which are contained in a parent container using display: table.

.wrapper {
  border: 1px solid gray;
  border-radius: 5px;
  display: table;
  height: 220px;
  margin: 0 auto;
}
.wrapper .item {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  min-width: 200px;
  padding: 35px;
}
.item img {
  display: block;
}
<div class="wrapper">
  <div class="item">
    <a href="www.google.com" target="_blank">
      <img src="http://placehold.it/200x150" />
    </a>
  </div>

  <div class="item">
    <h4>Text Line One</h4>
    <p>Text 2
      <br />Text 3</p>
  </div>
</div>

Upvotes: 1

Related Questions