How to horizontally center divs with auto widths when using inner elements as display: block?

Question

I have something like this:

[ [span][link]              ]

but I would like something like this:

[       [span][link]        ]

Where the <span> and <a> element inside <div> element are centered in the middle horizontally

span and a element have auto width

div has hardcoded width 250px

How to do that?

My current CSS code is not working, it's centered to the left ;(:

a {
    margin: 0px; 
    padding: 0px;
    display: block;
    float: left;
    width: auto;
}

span {
    float: left;
}

div {
    display: inline;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
}

and HTML:

<div>
   <span>Name</span>
   <a href="#">Link</a>
</div>

@JeffNoel No, it's different, there they have percentage I have defined size in pixels. — dmn77, Aug 21 '13 at 15:19
If you want the span and link centered in the div, why are you floating them? Also why is the link set to display block and the div is inline? — j08691, Aug 21 '13 at 15:19
@j08691 because of the graphics and styling, it has to be that way — dmn77, Aug 21 '13 at 15:20
@dmn77 This is non-sense. [**Try it this way**](http://jsfiddle.net/lun471k/FAyrE/). — Jeff Noel, Aug 21 '13 at 15:23
@JeffNoel I need to have link and span to be `display: block`. It's very different than the question you are pointing me with the duplicate. — dmn77, Aug 21 '13 at 15:27
@dmn77 I am **sorry**, but what you want to achieve is impossible. You can't center two elements within a container element with them being `display:block;`, floated without any spacer elements beside them. Might be possible in `HTML7.01`. — Jeff Noel, Aug 21 '13 at 15:28
@dmn77 : WHY?? inline-block gives you the exact same functionalities, just more suitable for your question. You can't insist on not changing your HTML, keeping `a and span` with `display: block` and `float:left` and expect things to work magically. — Itay, Aug 21 '13 at 15:29

score 2 · Answer 1 · edited May 23 '14 at 23:46

2

Use inline-block display

<div class="outer">
   <span>Name</span>
   <a href="#">Link</a>
</div>

CSS:

span, a {
    display: inline-block;
}

.outer {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background: yellow;
    width: 500px;
    float:left;
}

jsFiddle Demo

edited May 23 '14 at 23:46

animuson

53,861
28
137
147

answered Aug 21 '13 at 15:16

Itay

16,601
2
51
72

1

it's not working for me ;( – dmn77 Aug 21 '13 at 15:18
No, span and link should be inside of the div. No other elements are allowed to use. – dmn77 Aug 21 '13 at 15:21
Try to add `display: block;` to link and span it will not be working. – dmn77 Aug 21 '13 at 15:24
1

@dmn77 Do you even know what `display:block` does? an element being a `block` will kick all other elements away from his horizontal lane. – Jeff Noel Aug 21 '13 at 15:25
@Itay I want to style the block element, if it's only inline I can not float: left and use custom height and width if necessary. That's a limit of non-block elements. – dmn77 Aug 21 '13 at 15:28
@dmn77: You can freely give `inline-block` custom height and width. It's not just `inline`. For further reading: [What’s the Deal With Display: Inline-Block?](http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/), [display - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display) – Itay Aug 21 '13 at 15:30
@Itay but I need float left, because I have many links not just one. everything it's one under the other. I need to have all the elements in one line, not everyone on the separate row ;(. How can I do that? – dmn77 Aug 21 '13 at 15:34
@dmn77 You're not reading the links I give you, and you do not understand what `inline-block` display is. Look at [this](http://jsfiddle.net/Bej7E/3/) demo. It has many links without floating... – Itay Aug 21 '13 at 15:36

score 0 · Answer 2 · answered Aug 21 '13 at 15:25

0

Remove the floats from the a and the span and instead float the divs. Try replacing your CSS with this:

a {
    margin: 0px; 
    padding: 0px;
}

div {
    text-align: center;
    width: 200px;
    float: left;
}

answered Aug 21 '13 at 15:25

Matthew R.

4,332
1
24
39

How to horizontally center divs with auto widths when using inner elements as display: block?

2 Answers2