CODEWITHSUNDEEP
htmlcss
user9993
user9993

Reputation: 6170

CSS horizontal alignment of a child DIV

I need to make either the child DIV itself right aligned or the SPAN within it right aligned. I expected the following code to work for this. What am I missing? It's still left aligned.

For some reason CSS does not seem to have a "horizontal-align" property (massive oversight?). So I decided to try making the span the full width and right align the text to achieve the same effect.

<div id="something" style="width: 600px">
  <div id="somethingElse">
    <span style="width: 100%; text-align: end;">My Text</span>
  </div>
</div>

Upvotes: 0

Views: 160

Answers (4)

panic_theorem
panic_theorem

Reputation: 11

Try using the CSS float attribute if it is the span tag that you want right-aligned.

<span style="float: right;">My Text</span>

EDIT:

Use text-align: right; if it is the text inside span you want right-aligned;

Upvotes: 1

m4n0
m4n0

Reputation: 32275

span is inline and alignment will not work since it adjusts itself only up to the content width. If you need to retain the span element, then use text-align: end for the parent element or else replace it with div.

#somethingElse {
  text-align: end;
}
<div id="something" style="width: 600px">
  <div id="somethingElse">
    <span>My Text</span>
  </div>
</div>

Upvotes: 2

j08691
j08691

Reputation: 207901

Just take your existing CSS and move it from the span to the div above it:

<div id="something" style="width: 600px">
  <div id="somethingElse" style="width: 100%; text-align: end;">
    <span>My Text</span>
  </div>
</div>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115096

span elements are inline by default and so collapse to their own width.

Setting the element to display:block allows you to set a width.

Then align the text to the right.

#something {
  border: 1px solid red;
}
span {
  text-align: right;
  display: block;
}

<div id="something" style="width: 600px">
  <div id="somethingElse">
    <span style="width: 100%; text-align: end;">My Text</span>
  </div>
</div>

Upvotes: 0

Related Questions