Another centering issue with a div that can change size

Question

I am trying to center align 2 items inside divs. The first input box works fine since I can hard code the width. The second, being a drop down, will change its width based on the content so I can't hard code a width. Text-align will center the label also, display:inline breaks the centering and I prefer not to have to do changes with JS, but I do realize that's an option.

http://jsfiddle.net/56cgcudb/2/

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div style="width: 160px; margin: 0 auto; border: solid;">
        <label for="Search" style="">Search</label>
        <input type="text" name="Search" id="Search" placeholder="Search" style="width: 125px" />
        <a class="icon-btn" href="#" style="">
            <i class="icon-magnifier-dark" style=""></i>
        </a>
    </div>
</div>

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 " style="">
    <div style=" display: inline-block; margin: 0 auto; border: solid;">
        <label for="dropdownMenu2">Drop Down</label>
        <div class="dropdown" style="">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="">
                option 1
                <span class="caret" style=""></span>
            </button>

            <ul class="dropdown-menu" aria-labelledby="dropdownMenu2" style="">
                <li>
                    <a href="#">Option 1 asdasdasd</a>
                </li>
                <li>
                    <a href="#">Option 2</a>
                </li>
                <li>
                    <a href="#">Option 3</a>
                </li>
                <li>
                    <a href="#">Option 4</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Elvn · Accepted Answer · 2015-09-01T18:02:12.753

1

Here's what I do for horizontally centering content. Create a CSS class:

// Classes
.center-block {
  margin-left: auto;
  margin-right: auto;
  width: 100%; // IMPORTANT: width has to be set to something or centering will not work. You can use ems, but percentages gives you responsive sizing 
}

So what about text-align? I prefer this method over a simple text-align, because this construct will center all objects in the div, not just text.

And in your code example

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 center-block">

Or, wherever you need to center stuff in a <div>

Updated: Center aligned content and left-aligned text

 // Classes
    .center-block-left-text {
      margin-left: auto;
      margin-right: auto;
      width: 100%; 
      text-align: left !important;
    }

Here's a good official CCS reference about centering of all sorts.

edited Sep 01 '15 at 18:02

answered Sep 01 '15 at 16:16

Elvn

3,021
1
14
27

Unless I am missing something, that works until the drop down size changes. It still stays with the original centering instead of moving to compensate for it being longer or shorter. Being it's a js drop down and not a regular HTML one, it will change size depending on what's selected. – VirtualLife Sep 01 '15 at 16:23
Are you trying to center horizontally? That's what this does. – Elvn Sep 01 '15 at 16:30
Correct, but it doesn't change the centering when the content size changed dynamically. I implemented you style here. http://jsfiddle.net/56cgcudb/4/ If you change the drop down to the long 1, it's no longer centered. – VirtualLife Sep 01 '15 at 16:37
Where you put the center-block class is based on what you need. I updated the answer, now that I see what you want to do. – Elvn Sep 01 '15 at 16:40
Replacing the `margin: auto` lines with one `text-align:center` does what you ask for. I'm not sure what you meant with the drawbacks you mentioned in the OP. – delCano Sep 01 '15 at 16:43
Having styles in the
is not good coding practice. But I edited my comment anyway. Using a text align will not actually center a the objects within a
only the text. I might be mistaken but I think the asker wants to center the list itself not just the text.
– Elvn Sep 01 '15 at 16:46
@ValAsensio I am trying to make it look the same as the input box. Where the dropdown is aligned center and the label stays left justified with it. text-align:center does align the drop down, but it also centers the label instead of leaving it left justified with the start of the drop down. – VirtualLife Sep 01 '15 at 17:49
Okay. So you want the drop down center aligned always, and the text left aligned always. I think I understand now better what you're looking for. Let me think about this for a minute, and I'll get back to you with an update. – Elvn Sep 01 '15 at 17:59
I added a section for center aligned content and left-aligned text. I haven't tested it, but I think it should work. Please let me know. – Elvn Sep 01 '15 at 18:03
Thanks. That wasn't exactly it, but you got me to the right answer. I had to do the text-align:center and then add another div around the label and the drop down that has a display:inline-block and then a float left on the label. http://jsfiddle.net/56cgcudb/7/ – VirtualLife Sep 01 '15 at 20:40
Sorry wrong fiddle and won't let me edit my last comment. http://jsfiddle.net/56cgcudb/8/ – VirtualLife Sep 01 '15 at 20:50
1

Great. I'm glad you worked through this with me. Frequently with CSS, there are so many options and interactions, that it's often a matter of theorizing a solution and then testing permutations until you hit the nail on the head. – Elvn Sep 01 '15 at 21:01

Another centering issue with a div that can change size

1 Answers1