LastSecondsToLive LastSecondsToLive - 6 months ago 22
CSS Question

HTML/CSS - Left Align and center on same line

I want to left align some text and center another Text on the same line in HTML and CSS. I also want a

margin-left
on the left-aligned text.

This is my current approach:

HTML:

<div id="wrapper">
<h1 class="align-left">LEFT</h1>
<h1>CENTER</h1>
</div>


CSS:

.align-left {
float: left;
margin-left: 20px;
}

#wrapper {
text-align: center;
}


This works with left and right align, but the margin also pushes the centered text. I think this is because the
float: left
keeps the left-aligned text in the page flow.

Thank you really much :)

Answer

Use like this

<div id="wrapper">
  <h1 class="align-left">LEFT</h1>
  <h1 class="align-center">CENTER</h1>
</div>
<style>
h1.align-left {
    text-align:left;
    padding:0;
    margin:0;
    position:absolute;
}

h1.align-center{
  text-align: center;
}
</style>