How to Use The Display:Inline with Text-Align: Right

Align two inline-blocks left and right on same line

Edit: 3 years has passed since I answered this question and I guess a more modern solution is needed, although the current one does the thing :)

1.Flexbox

It's by far the shortest and most flexible. Apply display: flex; to the parent container and adjust the placement of its children by justify-content: space-between; like this:

.header {
    display: flex;
    justify-content: space-between;
}

Can be seen online here - http://jsfiddle.net/skip405/NfeVh/1073/

Note however that flexbox support is IE10 and newer. If you need to support IE 9 or older, use the following solution:

2.You can use the text-align: justify technique here.

.header {
    background: #ccc; 
    text-align: justify; 

    /* ie 7*/  
    *width: 100%;  
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
 .header:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em; 

    /* ie 7*/ 
    *display: inline;
    *zoom: 1;
    *text-align: left; 
}

.nav {
    display: inline-block;
    vertical-align: baseline; 

    /* ie 7*/
    *display: inline;
    *zoom:1;
    *text-align: right;
}

The working example can be seen here: http://jsfiddle.net/skip405/NfeVh/4/. This code works from IE7 and above

If inline-block elements in HTML are not separated with space, this solution won't work - see example http://jsfiddle.net/NfeVh/1408/ . This might be a case when you insert content with Javascript.

If we don't care about IE7 simply omit the star-hack properties. The working example using your markup is here - http://jsfiddle.net/skip405/NfeVh/5/. I just added the header:after part and justified the content.

In order to solve the issue of the extra space that is inserted with the after pseudo-element one can do a trick of setting the font-size to 0 for the parent element and resetting it back to say 14px for the child elements. The working example of this trick can be seen here: http://jsfiddle.net/skip405/NfeVh/326/

How to make inline-block align right

Placing h1 image tag after the text would serve the purpose.

<h1>  
      Enjoy the world of pure travel masti
      <img src="burj.jpeg" alt="Sample Picture">  
 </h1>

CSS center display inline block?

The accepted solution wouldn't work for me as I need a child element with display: inline-block to be both horizontally and vertically centered within a 100% width parent.

I used Flexbox's justify-content and align-items properties, which respectively allow you to center elements horizontally and vertically. By setting both to center on the parent, the child element (or even multiple elements!) will be perfectly in the middle.

This solution does not require fixed width, which would have been unsuitable for me as my button's text will change.

Here is a CodePen demo and a snippet of the relevant code below:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

How to use both display inline and margins/text-align

If you want to inline all the elements then flex-box is the best choice.
You can do so by adding it to your stylesheet.

.equation {
    display: flex;
    align-items: center;
    justify-content: center;
}

If you don't want to use flexbox. Then display: inline-block with a float will help. The example will be.

h2 {
    display: inline-block;
    float: left;
}

Note: This is for example purposes only. Don't try to apply styles directly on the h2 tag, the style will be applied to all h2 elements of the page

Use it like this if you want it to apply on h2 tags within the .equation

.equation h2 {
    display: inline-block;
    float: left;
}

Aligning text to the left, middle, right using span, text align, and inline-block, CSS, HTML

To get them all on the same line you don't need the spans I suggested in your last question, but you do need to change the order of the divs. Then you just float the left and right elements to their respective sides.

#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>

How to fix: CSS display:inline-block with text-align:center on parent is slightly off-center

You Try

    <nav id="menu">

        <ul>
            <li class="menuitem"><a href="index.html">Home</a></li>
            <li class="menuitem"><a href="gallery.html">Gallery</a></li>

            <li class="menuitem"><a href="shop.html">Shop</a></li>
            <li class="menuitem"><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

CSS:

#menu{
    width:960px;
    max-height:90px;
    background:#ffffff;
}

#menu ul{
    text-align:center;
    list-style:none;
    padding: 18px 0 0 0;
    width:960px;
}

#menu li{
    display:inline-block;
    vertical-align:middle;
}

#menu li a,menu li a:visited{
    color:#333347;
    text-decoration:none;
    font-size:20px;
    font-weight:bold;
    padding:0px 13px 0px 13px;
}

It will make list at center

---

Related Topics