0

I have an inline-block element that must be centered within a div. 

<div class="parent">
  <div class="other">
    some stuff that should not be centered
  </div>
  <div class="other2">
    some stuff that should not be centered
  </div>
  <div class="element">
    some element that needs to be centered
  </div>
</div>

I only have access to the CSS and not the HTML. I cannot use "text-align: center" on the parent div, as there are a lot of containers within the parent. The element must remain an inline-block element.

I only want to center "element". How can I do this?

Asons
  • 84,923
  • 12
  • 110
  • 165
Andrew Zaw
  • 754
  • 1
  • 9
  • 16
  • Can't you just `text-align: center` on the `.element` class? – jdfink Aug 08 '19 at 21:39
  • Sorry, should have specified it was not text that needed to be centered. I am trying to center the whole "element" div, not text within it. – Andrew Zaw Aug 08 '19 at 21:41
  • As you don't/can't use Flexbox, I changed the duplicate. Have a look at this answer: https://stackoverflow.com/a/46590898/2827823 ... also note, you can use `position: relative` along with this answer: https://stackoverflow.com/a/34071945/2827823 – Asons Aug 08 '19 at 22:12

1 Answers1

-2

text-align: center is indeed the way to go; it's merely a matter of finding a selector that will only target the element that you're after. Based on your above example, all you should need is .element:

.element {
  text-align: center;
}
<div class="parent">
  <div class="other">
    some stuff that should not be centered
  </div>
  <div class="other2">
    some stuff that should not be centered
  </div>
  <div class="element">
    some stuff that needs to be centered
  </div>
</div>

Assuming there are multiple elements with the class element you can use the child combinator selector (>) as .parent > .element to specifically target the one that is a direct child of .parent:

.parent > .element {
  text-align: center;
}
<div class="parent">
  <div class="other">
    some stuff that should not be centered
  </div>
  <div class="other2">
    some stuff that should not be centered
  </div>
  <div class="element">
    some stuff that needs to be centered
  </div>
</div>

You could also use a pseudo-selector like :nth-of-type with .parent > div:nth-of-type(3), which would target the third <div> child of .parent, and thus achieve the same result:

.parent > div:nth-of-type(3) {
  text-align: center;
}
<div class="parent">
  <div class="other">
    some stuff that should not be centered
  </div>
  <div class="other2">
    some stuff that should not be centered
  </div>
  <div class="element">
    some stuff that needs to be centered
  </div>
</div>

If you're looking to center the whole element and not just the text, you're looking for margin: 0 auto, though note that a <div> element occupies the full width of the line by default, so you'll want to set a width on the element as well. Ideally this would be width: fit-content, to ensure that the element only occupies as much space as the text:

.parent > .element {
  margin: 0 auto;
  width: fit-content;
}
<div class="parent">
  <div class="other">
    some stuff that should not be centered
  </div>
  <div class="other2">
    some stuff that should not be centered
  </div>
  <div class="element">
    some stuff that needs to be centered
  </div>
</div>

Note that margin only applies to block-level elements (which <div> is by default), so if you manually changed this with display: inline-block (or you're using a <span>), you'll need to additionally set display: block.

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • This seems to just center align the stuff inside "element". I am trying to center the whole div in regards to the parent. – Andrew Zaw Aug 08 '19 at 21:44
  • Then you're looking for `margin: 0 auto` instead, though note that you'll need to give it a fixed `width`. I'll update my answer to mention that. – Obsidian Age Aug 08 '19 at 21:45
  • You'd also need to set `display:block`, otherwise `margin:0 auto` wouldn't work. – jdfink Aug 08 '19 at 21:47
  • @jdfink - A `
    ` element is block-level by default, though I'll specify that as well.
     – Obsidian Age Aug 08 '19 at 21:48
  • @ObsidianAge I only mention that because the OP says it's an inline-block element that needs to be centered. You're 100% right, just pointing it out for the OP. – jdfink Aug 08 '19 at 21:52