CODEWITHSUNDEEP
htmlcss
hidekinogo
hidekinogo

Reputation: 21

How to position images on the same line as an h1 element in HTML/CSS?

I am completely stuck trying to get a left chevron and a right chevron to display on either side of a date in an h1 tag. I want a user to be able to click on either chevron to move forward or backward one day. However, no matter what combination of div or img classes and position, float, display it still looks like the screenshot attached, even though I've made sure the document is updating.

How can I modify the HTML/CSS so the chevrons are placed on the same line as the date? 

<div class= "dater">
  <div class="chevron-left">
     <img src="glyphicons-225-chevron-left.png"/>
  </div>  
  <h2><%= @todie %></h2>
  <div class="chevron-right">
     <img src="glyphicons-224-chevron-right.png"/>
  </div>
</div>

enter image description here

EDIT: My solution based on Rob's answer.

.chevron-right img {
  float: right;

}

.chevron-left img {
 float: left;

}

.dater {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  margin-top: 60px;
  margin-bottom: 40px;
}

.dater h2 {
  text-align: center;
  font-weight: 400;
  float: left;
}

Upvotes: 0

Views: 993

Answers (1)

Rob
Rob

Reputation: 15158

The reason for your problem is you have the images contained within block level elements which occupy the full width of the browser viewport. Even then it won't work exactly as you wish but there are many ways to accomplish it.

First, you can put the images inside the <h2> to the left and right of the text. That's the easiest way.

Second, you can use the CSS pseudo classes ::before and ::after

You can also set the width of the <h2> and float the everything, images included but the must be set to inline to help this along.

There are more ways than just those.

Upvotes: 1

Related Questions