0

I need to align the element to the exact center of the div like how it is in 3rd div

<div class="main">
    <div style="float: left;"><h2>Home</h2></div>
    <div><span>Welcome</span></div>
    <div style="float: right;">
        <select class="form-control">
            <option>Option 1</option>
            <option>Option 222222</option>
            <option>Option 33333333</option>
            <option>Option 444444444</option>
        </select>
    </div>
</div>
<br/>
<div class="main">
    <div style="float: left;"><h2>Home</h2></div>
    <div><span>Welcome</span></div>
    <div style="float: right;">
        <a href="#">Click here to navigate</a>
    </div>
</div>
<br/>
<div class="main">
    <span>Welcome</span>
</div>

click here for jsFiddle link.

WebDevBooster
  • 14,674
  • 9
  • 66
  • 70
Jai
  • 11
  • 4
  • 6
    Possible duplicate of [CSS: center element within a
    element](https://stackoverflow.com/questions/6810031/css-center-element-within-a-div-element)
     – Nilesh Khisadiya Jul 26 '17 at 12:32
  • Possible duplicate of [How to horizontally center a
    in another
    ?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div)
     – demo Jul 26 '17 at 12:34
  • You can try flexbox http://jsfiddle.net/cwkzq/94/ – Nenad Vracar Jul 26 '17 at 12:35
  • The reason why it's currently not centered is because the two floating `div`s have different widths. Either give them the same width or look for a solution without floats. – vi5ion Jul 26 '17 at 12:36

6 Answers6

0

Same html, this css, little css trick , use position absolute to calculate all width of parent, is this class: .over-all:

body{
  background:none;
  margin:0;
  padding:0;
}
.over-all{
  position:absolute;
  top:0;
  left:0;
  padding:0;
  width:100%;

  z-index:3;
  text-align:center;
}
.main{
  width:90%;
  position:relative;
  text-align:center;

  border: 1px solid black;
  line-height:2.5;
}
.main> div{
  display:inline-block;

}
select{
  //float:right;
    width: auto!important;
}
h2{
  display:inline-block;
  float:left;
}
Álvaro Touzón
  • 1,247
  • 1
  • 8
  • 21
0

The html is the same, I added some styling to the spans within the divs and to .main. it uses position absolute to center the element regardless of what else is in there. Doing this you would have to set the height of the parent div though

body{
  background:none;
}

.main{
  text-align:center;
  border: 1px solid black;
  line-height:2.5;
  height: 40px;
}
.main> div{
  display:inline-block;
  height: 40px;

}
select{
  //float:right;
    width: auto!important;
}
h2{
  display:inline-block;
  float:left;
}

div span {
    position: absolute;
    /* move the element half way across the screen */
    left: 50%;
    /* allow the width to be calculated dynamically */
    width: 200px;
    /* then move the element back again using a transform */
    transform: translateX(-50%);
}

here is an update of your fiddle http://jsfiddle.net/cwkzq/98/

CumminUp07
  • 1,936
  • 1
  • 8
  • 21
0

Insert to <span> the contains welcome the following

style="display:block; position:absolute; margin:auto; left:0; right:0; top:0; bottom:0;">
t.m.adam
  • 15,106
  • 3
  • 32
  • 52
marcos.efrem
  • 757
  • 3
  • 13
0
<div class="main">
<div style="float: left;"><h2>Home</h2></div>
<div style="width:1%"><span>Welcome</span></div>
    <div style="float: right;"><select  style="padding:0rem;" class="form-control">
        <option>Option 1</option>
        <option>Option 222222</option>
        <option>Option 33333333</option>
        <option>Option 444444444</option>
    </select></div>
</div>
<br/>
<div class="main">
<div style="float: left;"><h2>Home</h2></div>
<div style="width:2%;"><span>Welcome</span></div>
    <div style="float: right;">
    <a href="#">qwertyusdfghjfghiop</a>
    </div>
</div>
<br/>
<div class="main">
  <span>Welcome</span>
</div>
Carlos Chávez
  • 422
  • 5
  • 14
0

can do this with positioning...! Try this may be this will help u

body{
  background:none;
}

.main{
  text-align:center;
  border: 1px solid black;
  line-height:2.5;
}
.main> div{
  display:inline-block;
  
}
select{
  //float:right;
 width: auto!important;
}
h2{
  display:inline-block;
  float:left;
}
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css'/>
<div class="main">
<div style="position:absolute;left:0px;"><h2>Home</h2></div>
<div><span>Welcome</span></div>
 <div style="position:absolute;right:0px;"><select class="form-control">
  <option>Option 1</option>
  <option>Option 222222</option>
  <option>Option 33333333</option>
  <option>Option 444444444</option>
    </select></div>
</div>

<br/>
<div class="main">
<div style="position:absolute;left:0px;"><h2>Home</h2></div>
<div><span>Welcome</span></div>
 <div style="position:absolute;right:0px;">
    <a href="#">qwertyusdfghjfghiop</a>
 </div>
</div>
<br/>
<div class="main">
  <span>Welcome</span>
</div>
Ganesh Putta
  • 2,622
  • 2
  • 19
  • 26
0

I believe the

position: absolute;

Will cause issue on Responsive and Mobile. My solution fixes your issue without adding any position property to the elements:

.main> div{
  display:inline-block;
  width: 33%; //<--- Just add this
}

This way, even on responsive, your element will always be in the center of the element in the middle.

Mario Peusschers
  • 11
  • 1