Left align and right align h2 with css class in one line

align text left, center right same line html
css align: right
text start from right to left css
how to align text side by side in html
justify left
h1 align: center
h3 align: center
left align and right align text on the same line html

I am trying to left and right align some text on a single line. I am able to align it but my CSS is not going across the entire line.

Here is a jsFiddle. The "Test" line is how it looks normally but i want to align text on the left and right. I am able to align text on the left and right but the grey bar does not go all the way across. I want the entire line to be a grey bar and not just the text.

HTML

<h2>Test</h2>

<div>
    <h2 class="alignleft">A</h2>
    <h2 class="alignright">B</h2>    
</div>

CSS

h2 {
    background-color: #555;
    color: #FFF;
    letter-spacing: 1px;
    margin: 20px 0;
    padding: 5px;
}

.alignleft {

    float: left;
}

.alignright {

    float: right;

How do I fix this?

Rather than making a massive change to your code. Simply give the div the background-color attribute and clear the floating elements with clear:both; on a break or any element to make it recognize the elements.

Here is a working JSFiddle: http://jsfiddle.net/fLj5qvc7/

HTML

<div>
    <h2 class="alignleft">A</h2>
    <h2 class="alignright">B</h2>    
    <br style="clear:both;" />
</div>

CSS

h2 {
    color: #FFF;
    letter-spacing: 1px;
    padding: 5px;
    margin:0;
}

div {
    background-color: #555;
}

.alignleft {

    float: left;
}

.alignright {

    float: right;
}

Left, Center and Right align on a single line - HTML & CSS, Hi, I have an h2 tag and two spans that I want to all appear on the same line, the h2 text on the left, one of the spans in the middle and the other  Hi, I have an h2 tag and two spans that I want to all appear on the same line, the h2 text on the left, one of the spans in the middle and the other span on the right.

One solution using to h2 elements inside div position absolute(without change html structure):

h2 {
  background-color: #555;
  color: #FFF;
  letter-spacing: 1px;
  margin: 20px 0;
  padding: 5px;
  width: 90%;
  margin: 0 auto;
}
div > h2 {
  width: 5%;
  position: absolute;
  top: 8px;
  margin: 0;
  padding: 0;
  height: 37px;
  line-height: 37px;
  text-align: center;
}
div > h2:last-child {
  right: 9px;
}
<h2>Test</h2> 
<!-- How it looks normally -->
<div>
  <h2 class="alignleft">A</h2>

  <h2 class="alignright">B</h2> 
</div>

Alignment, font styles, and horizontal rules in HTML documents, left : text lines are rendered flush left. center : text lines are centered. right : text For left to right text, the default is align=left , while for right to left text, the default is Using CSS, for example, you could achieve the same effect as follows: You could reduce the scope of the style by setting the class attribute on the element: Setting the width of the element will prevent it from stretching out to the edges of its container. The element will then take up the specified width, and the remaining space will be split equally between the two margins: This div element is centered. Note: Center aligning has no effect if the width property is not set (or set to 100%).

I'd suggest, pretty much at its simplest:

div {
  /* forcing the element to clear floats: */
  clear: both;
  /* to force the <div> to wrap around its floated elements: */
  overflow: hidden;
  /* to float right, an element has to appear earlier in the
     HTML than float left content; so instead we align the
     text to the right of the parent: */
  text-align: right;
  background-color: #aaa;
  margin-bottom: 10vh;
}
h2.alignleft {
  /* float this element off to the left: */
  float: left;
}
<h2>Just a &lt;h2&gt;, without classes</h2>
<h2 class="alignleft">Text in just &lt;h2&gt;</h2>
<div>
  <h2 class="alignleft">Text in both &lt;h2&gt; and &lt;div&gt;</h2>
</div>
<div>
  <h2 class="alignleft">A</h2>
  <h2 class="alignright">B</h2> 
</div>

How To Align Things In CSS, Sometimes, however, you may want to align things inside that line box against other things, for example, if you have an icon displayed  If you were to then give your CSS classes alignleft and alignright values of text-align: left; and text-align: right; respectively, you would get close to your desired result, but your right-aligned text would be bumped down one line because of the new paragraph.

You can try something like this:

HTML

<div>
    <h2 class="alignleft">A</h2>
    <h2 class="alignright">B</h2>    
</div>

CSS

h2 {
    background-color: #555;
    color: #FFF;
    letter-spacing: 1px;
    margin: 0;
}

.align {
    background-color: #555;
    margin: 20px 0;
    padding: 5px;
}

.alignright {
    float: right;
}

Here is a live example.

CSS Text Alignment, The following example shows center aligned, and left and right aligned text (left text-align: center; } h2 { text-align: left; } h3 { text-align: right; }. Try it Yourself ». When the text-align property is set to "justify", each line is stretched so that every line has The vertical-align property sets the vertical alignment of an element. .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.

Your question is unclear about what you really want. What i understood is that you want Both A and B paragraph to fill up full length of the page. If so the its very simple you can use display: block; property in your CSS for both the Headings.

How to Align Text with CSS, 1-877-932-8228 · Contact Us Aligning text in CSS can be achieved using the text-align property or the vertical-align property. </head> <body> <h1>Align Text</h1> <h2>Text-Align</h2> <div style="text-align: left;">text-align:left</div> <​div style="text-align: center;">text-align:center</div> <div style="text-align: right  Alignment and flex-direction. The start line will also change if you change the flex-direction property — for example using row-reverse instead of row. In this next example I have items laid out with flex-direction: row-reverse and justify-content: flex-end. In a left to right language the items all line up on the left.

Equidistant Objects with CSS, The left-most object is left aligned with it's parent element. Each object is equidistant from one another at all times. First I gave each image a unique class: #PASS: First on the left, float the rest right in equal size boxes CSS: #​movers-row { margin: -120px 0 0 120px; } #movers-row div { width: 33.3%; float: left; }  If the element to be centered (class .centered) is 200px by 100px, the CSS to center it from the center of the element would look like this: .centered { position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: 100px; }

vertical-align, The vertical-align property in CSS controls how elements set next to each other on a line are lined up. img { vertical-align: middle; } In order for this. h2 { display​: inline-block; margin: 0; width: 150px; text-align: right; This property does not allow you to “vertically center” an element within resize · right. A whole bunch of years ago, we posted on this idea here on CSS-Tricks. We figured it was about time to update that and do the subject justice. Imagine a scenario where you need to split a layout in half. Content on the left and content on the right. Basically two equal height columns are needed inside of a container.

HTML, The HTML <p> align Attribute is used to specify the alignment of paragraph left: It sets the text left-align. right: It sets the text right-align. center: It sets the text center-align. justify: It stretch the text of paragraph to set the width of all lines equal. If you like GeeksforGeeks and would like to contribute, you can also write an  The text-align property specifies the horizontal alignment of text in an element. left if direction is ltr, and right if direction is rtl. no. Read about animatable. JavaScript syntax: object .style.textAlign="right" Try it. Browser Support. The numbers in the table specify the first browser version that fully supports the property.

Comments
  • Are you saying you want the A and B in the grey bar? I'm confused on what youre wanting.
  • Yes that is correct.
  • Do you want them both to be in one line?
  • Yes. 1 grey bar with "A" on left and "B" on right on a single line