How to center content, vertically and horizontally, in inline-block-div?

Question

After making two div elements inline-block, and then vertical-align: top, I'm left with an image which was originally centered both vertically and horizontally within the div, at the top left-hand side. Here is the code:

.soundscapeImgDiv {
  /* background-color: white; */
  background-image: url('../images/testImg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  width: 260px;
  height: 85%;
  margin-left: 10px;
  margin-top: 12px;
  border-radius: 12px;
  /* text-align: center; */
  display: flex;
  align-items: center;
  justify-content: center;
  display: inline-block;
  vertical-align: top;
}

.portalInfoDiv {
  background-color: White;
  margin-left: 10px;
  height: 71px;
  width: 56%;
  display: inline-block;
  vertical-align: top;
}

<div class="bottomPlayerDiv">

  <div class="soundscapeImgDiv">

    <!-- <div class="playerDiv"> -->
    <img id="pause/playIcon" src="images/pause.png">
    <!-- </div> -->

    <!-- <img id="soundscapeImg" src="images/testImg.png" width="100%"> -->
    <!-- <img id="pause/playIcon" src="images/pause.png"> -->
  </div>

  <div class="portalInfoDiv">
    <h1>Shanghai, China night lols</h1>
    <p>somethingsGuy • 5 days ago</p>
  </div>

</div>

How can I center it like before?

Current Vs intended:

[Do none of these answer your question?](https://stackoverflow.com/search?q=inline-block+center+content) — Rob, Jan 14 '20 at 17:42
@Rob That is what I had done and had worked. But after inline-block'ing its been undone. — , Jan 14 '20 at 17:44
Can you share a full example? It's not clear from your code / question what the intended result is. Also, I see you use `display: flex` but then you overwrite it with `display: inline-block`. Is this intentional? — volt, Jan 14 '20 at 17:46
@volt does align-items: center; justify-content: center; depend on display flex? If so that is why it's been undone I think. How to fix it, I dont know. — , Jan 14 '20 at 17:48
Yes, `align-items: center` and `justify-content: center` only apply to elements set to either `display: flex` or `display: inline-flex`. So when you overwrite `display: flex` with `display: inline-block` you essentially nullify those properties. We still need a more complete example if you want us to help. — volt, Jan 14 '20 at 17:51
(1) use `inline-flex` to combine `inline-block` and `flex` (2) you add an extra container inside the inline-block that you make flex — Temani Afif, Jan 14 '20 at 20:06

Aft3rL1f3 · Answer 1 · 2020-01-14T19:15:28.317

You cant display inline-block and flex. If you want to use the 'justify content' and align-content/align-items/align-self properties you have to use either 'display (flex or grid)'.

In the example below, the last one written will hold true.

display: flex;
display:inline-block;

I added this edit becuase it dawned on me that your going to probably not get the layout you want after fixing your error. You desire a layout that displays blocks inline, and your in luck becuase this is what flex-box was made for.

W3Schools.com This is a great place to learn how to use a new CSS tool like flex. Try it out and if you have issues use Stack to solve them!

'THE DOCUMENT BELOW' is how I would approach the making of a card. The layout works, and I simplified the code to be as readable as I could. While developing this snippet I realized as I do with most all HTML/CSS3 layouts, "this could be done many, many different ways", however; one way you might want to consider, as it creates what could be considered a web-standard for card layout is, Bootstrap4. The BS4 framework is easy to work with and aesthetically easy on the eye. Anyhow I hope this helps.

<!DOCTYPE html>
<html LANG="en">

<head>
    <meta name=" viewport " content=" width=device-width, initial-scale=1.0 " />
    <meta name=" author " content="AFT3RL1F3">
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Montserrat+Alternates&display=swap" rel="stylesheet">

    <style>
        body {
            background-color: #222
        }

        .flex-container {
            display: flex;
            width: 600px;
            height: 200px;
            margin: 20px;
            padding: 20px;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-color: rgb(70, 70, 70, 1);
        }

        .flex-container-L {
            background-color: #f1f1f1;
            width: 50%;
            height: 100%;
            text-align: center;
            background-color: #CCC;
            background-image: url('http://localhost/Sandbox/public/SF-002.png');
            background-size: 150%;
            background-repeat: no-repeat;
        }

        .flex-container-R {
            display: grid;
            grid-template-columns: auto;
            background-color: #f1f1f1;
            width: 50%;
            height: 100%;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .title {
            display: block;
            margin: 0;
            padding: 0;
            font-family: 'Montserrat Alternates', sans-serif;
            font-size: 24px;
            font-weight: 700;
        }

        .subtitle {
            display: block;
            margin-top: -100px;
            padding: 0;
            font-family: sans-serif;
            font-size: 18px;
            font-weight: 400;
        }
    </style>
</head>

<body>
    <h2>StackOverFlow.com example by: AFT3RL1FE</h2>
    <hr>
    <div class="flex-container">

        <div class="flex-container-L"></div>

        <div class="flex-container-R">
            <p class="title">San Francisco</p>
            <p class="subtitle"> Worlds Most Diverse City</p>
        </div>

</div>
</body>

</html>

Can you provide an example of how to make the intended result? — , Jan 14 '20 at 18:04

How to center content, vertically and horizontally, in inline-block-div?

1 Answers1