CODEWITHSUNDEEP
csshtml
Dranreb
Dranreb

Reputation: 93

Align image and text properly in HTML

This is the example: enter image description here

I want to align the image along side with the name but somehow the image just floats up a little higher. Any help?

UPDATE:

#profile_name_header {
  background-color: #006400;
  font-family: Century Gothic;
  color: #FFFFFF;
  font-size: 20px;
  padding-bottom: 12px;
  padding-top: 12px;
  padding-left: 10px;
}
<div id="profile_name_header">
  <img src=< ?php echo "./img/".$genderprofile. ""; ?> style = "height:30px; margin-bottom:0px;" >
  <?php echo $fullname;  ?>'s Profile
</div>

Thank you.

Upvotes: 4

Views: 11972

Answers (4)

Momin
Momin

Reputation: 3320

Try this code with proper HTML Markup......

*{
  margin: 0;
  padding: 0;
}
figure{
width:620px;
display: block;
margin:0 auto;
}
figure img{
  display: block;
  width: 100%;
  height: auto;
}
figcaption{
  text-align:center;
}
<figure>
<img src="https://unsplash.it/600/280" alt="">
  <figcaption>
    <small>Image Caption goes here</small>
  </figcaption>

</figure>

Upvotes: 0

numberers
numberers

Reputation: 31

There is a CSS Property called vertical align, which can be used to align several html elements in respecr to the text baseline. I'd suggest you set it to center, but try and see what fits best.

(Some further reading about the conflicts among devs.)

Upvotes: 3

Michael Coker
Michael Coker

Reputation: 53664

Use vertical-align on the img since it's adjacent inline content.

img {
    vertical-align: middle;
}
<img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> @Dranreb

A fancier way is to use flexbox, but it's overkill for your use case. If you wanted to do that, just give them a parent, and use align-items to affect vertical alignment.

div {
  display: flex;
  align-items: center;
}
<div>
  <img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> @Dranreb
</div>

Upvotes: 10

Ansh
Ansh

Reputation: 94

Assign one class name to the image. For e.g. 

<img class="backgroundImg" src="images/bg.jpg" />

Then use these css properties:

.backgroundImg {
  position: relative;
  top: 5px; // or 10px
}

Based on your text leveling, just adjust the "top" value.

Note:You can also use "id" and assign the same css properties.

Upvotes: 0

Related Questions