How to position text to the left, center, or right with CSS, HTML, using span, text align, and inline-block styling

Question

How to position text to the left, center, or right with CSS, HTML, using span, text align, and inline-block styling

I have 4 boxes. In one of the boxes, I have placed 3 smaller boxes and I want to align them to the left, center, and right while still keeping them on the same line. I've attempted using inline-block, but it doesn't seem to be working properly. Can you please review my code below and see where I might have gone wrong?

 

#boxContainer {
    border: 1px solid black;
    width: 500px;
    height: 500px;
}
#leftBox {
    text-align:left;
    border: 1px solid black;
    display: inline-block;
    width: 100%;
}
#centerBox {
    text-align:center;
    border: 1px solid black;
    display: inline-block;
    width: 100%;
}
#rightBox {
    text-align:right;
    border: 1px solid black;
    display: inline-block;
    width: 100%;
}
span {
    border: 1px solid red;
}

<div id='boxContainer'>
  <div id='leftBox'><span>Left</span></div>
  <div id='centerBox'><span>Center</span></div>
  <div id='rightBox'><span>Right</span></div>
</div>

html css

Answer 1

Answer №1

If you want all the elements to be on the same line, you can achieve that by changing the order of the divs and floating the left and right elements accordingly. No need for the spans as suggested in the previous question.

#outer {
  border: 1px solid black;
  width: 500px;
  height: 500px;
  text-align: center;
}
#innerLeft {
  float: left;
  border: 1px solid black;
}
#innerMiddle {
  border: 1px solid black;
  display: inline-block;
}
#innerRight {
  float: right;
  border: 1px solid black;
}

<div id='outer'>
  <div id='innerLeft'>Left</div>
  <div id='innerRight'>Right</div>

  <div id='innerMiddle'>Middle</div>
</div>

Answer 2

If you want all the elements to be on the same line, you can achieve that by changing the order of the divs and floating the left and right elements accordingly. No need for the spans as suggested in the previous question.

#outer {
  border: 1px solid black;
  width: 500px;
  height: 500px;
  text-align: center;
}
#innerLeft {
  float: left;
  border: 1px solid black;
}
#innerMiddle {
  border: 1px solid black;
  display: inline-block;
}
#innerRight {
  float: right;
  border: 1px solid black;
}

<div id='outer'>
  <div id='innerLeft'>Left</div>
  <div id='innerRight'>Right</div>

  <div id='innerMiddle'>Middle</div>
</div>

Answer 3

Answer №2

To achieve the desired layout within your existing structure, you can set the outermost div to have a position: relative property, and the inner divs with a position: absolute property.

Check out this JS Fiddle for reference.

When using absolute positioning, elements are positioned in relation to their closest non-static ancestor element. Learn more about CSS Position Property here.

Answer 4

To achieve the desired layout within your existing structure, you can set the outermost div to have a position: relative property, and the inner divs with a position: absolute property.

Check out this JS Fiddle for reference.

When using absolute positioning, elements are positioned in relation to their closest non-static ancestor element. Learn more about CSS Position Property here.

Answer 5

Answer №3

The reason for this behavior is that you have set the width of all the divs to 100% in your CSS, which enables them to occupy the entire width available within their respective parent containers. Therefore, even though they are displayed as inline blocks, they still expand to fill the entire width of their parent elements.

Answer 6

The reason for this behavior is that you have set the width of all the divs to 100% in your CSS, which enables them to occupy the entire width available within their respective parent containers. Therefore, even though they are displayed as inline blocks, they still expand to fill the entire width of their parent elements.

Answer 7

Answer №4

If you're wondering why the elements are displaying one per line, it's because their widths are set to 100%. To achieve the desired layout, change the width to 33.33%.

For any border-related issues, consider using box-sizing: border-box. More information can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

#outer {
    border: 1px solid black;
    width: 500px;
    height: 500px;
    box-sizing: border-box;//add this
}
#innerLeft {
    text-align:left;
}

#innerRight {
    text-align: right;
}

#innerMiddle {
    text-align: center;
}

#innerRight, #innerMiddle, #innerLeft {
    border: 1px solid black;
    display: inline-block;
    width: 33.33%;//change this
    float: left;//add this (reliable way of getting rid of inline-block gap)
    box-sizing: border-box;//add this
}
span {
    border: 1px solid red;
}

Check out the Fiddle for a live example: https://jsfiddle.net/0wuzgcba/

Answer 8

If you're wondering why the elements are displaying one per line, it's because their widths are set to 100%. To achieve the desired layout, change the width to 33.33%.

For any border-related issues, consider using box-sizing: border-box. More information can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

#outer {
    border: 1px solid black;
    width: 500px;
    height: 500px;
    box-sizing: border-box;//add this
}
#innerLeft {
    text-align:left;
}

#innerRight {
    text-align: right;
}

#innerMiddle {
    text-align: center;
}

#innerRight, #innerMiddle, #innerLeft {
    border: 1px solid black;
    display: inline-block;
    width: 33.33%;//change this
    float: left;//add this (reliable way of getting rid of inline-block gap)
    box-sizing: border-box;//add this
}
span {
    border: 1px solid red;
}

Check out the Fiddle for a live example: https://jsfiddle.net/0wuzgcba/

How to position text to the left, center, or right with CSS, HTML, using span, text align, and inline-block styling

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tackling the sticky header problem with in-browser anchoring and CSS dynamic height restrictions

Tips on customizing the appearance of mat-card-title within a mat-card

Delivering HTML Email

The webpage is drifting sideways to the right without any content being displayed

Using single page anchor tags in Next.js to toggle content visibility

Customize the font size in Bootstrap 5 using REM units

What could be causing the top navigation bar's background color to not display properly?

Design a background image that is optimized for both high-resolution retina displays and standard non-ret

Floating Action Button is not properly attached to its parent container

Tips for automatically scrolling to the bottom of a div when new data is added

Utilizing the after pseudo element for an active selector in CSS

Steps to Hide Pop-Up Cookie Module in HTML with Bootstrap 5

Ensuring the width of a div matches the adjacent containers

Enhancing React Performance: Storing Component Identity in Redux State

Style the modal body to display as a block on both desktop and mobile devices using CSS

Is there a way for me to retrieve the price using the xpath?

Combining an if-statement with an HTML button within a single function in JavaScript

Misaligned Div Content

Trying out basic form validation - Adjusting border color for an empty input

Images with full-width will scroll horizontally