Html Question posted in
Some basic documentation can be found here.

Html – Center an inline element that's next to 2 uncentered elements

On my webpage, I have three inline elements, and I want the second one to be centered, and the third to be aligned to the right.

<html>
<head>
<title>
Website
</title>
<style>
.inline1 {display: inline; padding-right: 10px;}
.inline2 {display: inline; text-align: center;}
.inline3 {display: inline; text-align: right; padding-left: 10px;}
</style>
</head>
<body>
<div>
<h4 class="inline1">
Inline 1
</h4>
<h4 class="inline2">
Inline 2
</h4>
<h4 class="inline3">
Inline 3
</h4>

None of these methods worked:

  • using position and left in CSS;
  • changing parent div display;
  • changing text-align of parent div and adding margin between elements;
  • changing inline elements to inline-block, flex, table, or tablecell display;

I want to keep the elements on the same line but aligned different horizontally.

Tags:

4

Answers


  1. 0

    You can do this with flex or inline-block. Check out the flex example below:

    .container {
    display: flex;
    justify-content: center;
  }
  .inline {
    margin: 0 5px;
  }
  .inline1, .inline3 {
    margin-left: auto;
  }
    <html>
<head>
<title>
Website
</title>
</head>
<body>
<div class="container">
  <h4 class="inline1">
  Inline 1
  </h4>
  <h4 class="inline2">
  Inline 2
  </h4>
  <h4 class="inline3">
  Inline 3
  </h4>
</div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    Use a flexbox with justify-content: space-between.

    .d1 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
    <div class="d1">
  <h4>Inline 1</h4>
  <h4>Inline 2</h4>
  <h4>Inline 3</h4>
</div>

<div class="d1">
  <h4>This value is a quite long one</h4>
  <h4>Centered between the others</h4>
  <h4>Short</h4>
</div>

    Here is a complete guide to flexbox.

    Login or Signup to reply.
  3. 0

    I’ve tried 4 methods by changing children’s width and position and making the parent display as flex and table as examples below. please have a look.

    DIV{
  position: relative;
}
DIV > *{
  position: relative;
  display: inline;
}

.inline1{ text-align: left   }
.inline2{ text-align: center }
.inline3{ text-align: right  }

/* ------------------------- */
#Width{ width: 100% }
#Width > *{
  display: inline-block;
  width: calc( 100%/3  - 3px )
}

/* ------------------------- */
#Position{
  width: 100%;
  height: 62px;
}
#Position > *{
  width: 100%;
  position: absolute;

}

/* ------------------------- */
#Flex {
  display: flex
}
#Flex > *{
  flex: 1 1 auto
}

/* ------------------------- */
#Table{
  display: table;
  width: 100%;
}
#Table > .row{
  display: table-row;
  height: 62px;
}
#Table > .row > *{
  display: table-cell;
  width: 33.33%;
  vertical-align: middle;
}
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="Width">
    <h4 class="inline1">
      Inline 1
    </h4>
    <h4 class="inline2">
      Inline 2
    </h4>
    <h4 class="inline3">
      Inline 3
    </h4>
  </div>
  <div id="Position">
    <h4 class="inline1">
      Inline 1
    </h4>
    <h4 class="inline2">
      Inline 2
    </h4>
    <h4 class="inline3">
      Inline 3
    </h4>
  </div>
  <div id="Flex">
    <h4 class="inline1">
      Inline 1
    </h4>
    <h4 class="inline2">
      Inline 2
    </h4>
    <h4 class="inline3">
      Inline 3
    </h4>
  </div>
  
  <div id="Table">
    <div class="row">
      <h4 class="inline1">
        Inline 1
      </h4>
      <h4 class="inline2">
        Inline 2
      </h4>
      <h4 class="inline3">
        Inline 3
      </h4>      
    </div>
  </div>
  
</body>
</html>

    I prefer to use flexbox.

    Login or Signup to reply.
  4. 0

    A 3 col grid – where the columns each have equal width – will allow you to place each of the elements as you wish, to left, to center, to right:

    <html>

<head>
  <title>
    Website
  </title>
  <style>
    div {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }
    
    .inline1 {
      display: inline-block;
      padding-right: 10px;
    }
    
    .inline2 {
      display: inline;
      text-align: center;
    }
    
    .inline3 {
      display: inline;
      text-align: right;
      padding-left: 10px;
    }
  </style>
</head>

<body>
  <div>
    <h4 class="inline1">
      Inline 1 and some more text
    </h4>
    <h4 class="inline2">
      Inline 2 - centered
    </h4>
    <h4 class="inline3">
      Inline 3
    </h4>
  </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search