CODEWITHSUNDEEP
htmlcsswordpress
DCR
DCR

Reputation: 15657

how to center span in div

I have a div and inside I have an image and a span with text. How do I center the span in whats left of the div? Essentially I'm trying to move the text to the right but do so in a way that will work for a responsive design 

  <div class="site-title">
<img style="vertical-align:middle" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/cropped-newswagimage-1.jpg" class="header-image" width="25%">
<span style="color:#518234;text-align:ce
  nter;">Educate ● Initiate ● Collaborate
</span>
  </div>

Upvotes: 0

Views: 63

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

Make the <span> display: inline-block, and additionally give it a width that is slightly under the remaining space. It already has text-align: center on it, though note that this isn't correctly applying in your snippet due to the line break. Fixing this up and both changing the display and adding the width will align the text in the center of the remaining space:

span {
  display: inline-block;
  width: 70%;
}
<div class="site-title">
  <img style="vertical-align:middle" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/cropped-newswagimage-1.jpg" class="header-image" width="25%">
  <span style="color:#518234;text-align:center;">Educate ● Initiate ● Collaborate
</span>
</div>

Upvotes: 1

Related Questions