How do I center inline-blocks?

Question

I was wondering how I can center inline-blocks. Any help? I tried doing margin-top: x em; but all it did was have the image go down. This inline-block is deliberately inside an image block. If you have links that show me how to position inline-blocks, I will gladly take them into consideration, as I am still learning how to do CSS and HTML.

#img-banner article {
  border: solid thick white;
  box-sizing: border-box;
  display: inline-block;
  width: 14em;
  position: static;
}

#img-banner h1 {
  font-family: 'Lobster', cursive;
  text-align: center;
  color: white;
  font-size: 27px;
}

<span id="img-banner">
    <article>
    <h1>Introduction</h1>
    </article>
    </span>

You talk about an image, but there is no image to be found in your example code. — Peter B, Mar 20 '18 at 17:10
Oh, the `img-banner` had its own css code for a background image. — Jose Chavez, Mar 20 '18 at 17:38

Drumline18 · Answer 1 · 2018-03-20T17:20:19.167

0

It would be important that you include the properties of the containing span as this is the parent you need to align on. Assuming you want to vertically center your element, you need to ask yourself if the height of your containing element is known and that will guide you towards the proper centering technique.

https://css-tricks.com/centering-css-complete-guide/

You will find alot of common centering techniques on this website. You can consider your inline-block element as a block-level element.

Personally, I like making sure my container is position:relative and then add top:50%; transform: translateY(-50%) to my unknown height positioned elements.

Edit : As noted in your comments, this HTML is invalid. Only inline elements are allowed in a span. I don't know why I overlooked this.

edited Mar 20 '18 at 17:20

answered Mar 20 '18 at 17:13

Drumline18

91
1
6

Thank you! Found out what do on here, but I have another question. Why can't `article` be a child of `span`? – Jose Chavez Mar 20 '18 at 18:00
`article` categorizes as `Flow content` in the HTML specifications. `span` only permits `Phrasing content` within itself. Phrasing content : https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2 – Drumline18 Mar 20 '18 at 18:53

How do I center inline-blocks?

1 Answers1