1

I want to place a div with a background of a photo in the middle of another div. I tried to use display: flex; and align-items: center; but it didn't work. I will use more divs like this one and if i use display: flex; they will be placed one under the other one in a row from top to the bottom of the page.

HTML:

    <div class="boxx">
          <div class="box" style="background: 
            url('photos/acrilic/acrilic1.jpg') no-repeat center center ; 
            -webkit-background-size: contain;
            -moz-background-size: contain;
            -o-background-size: contain;
            background-size: contain;">
    </div></div>

CSS:

    .boxx {
          width: 350px;
          height: 400px;
          display: inline-block;
          background: black;
    }

    .boxx .box {
          margin: 0 auto;
          width: 300px;
          height: 300px;
    }
Catalin Sandu
  • 47
  • 6
  • Is this your intention: https://jsfiddle.net/gv30bb7v/ ? If you use fixed dimensions, just add: margin:50px auto in second div (.box) and you are good to go.... – sinisake Nov 26 '17 at 15:41
  • OMG it was that simple haha. Thank you very much. It's exactly what i wanted – Catalin Sandu Nov 26 '17 at 15:45

2 Answers2

0

(Documentation / Tutorial)

Try this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d-flex {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            min-height: 100vh; /* optional */
        }
        .bg-red {
            background-color: red;
        }
        .bg-blue {
            background-color: blue;
        }
    </style>
</head>
<body>

    <div class="d-flex bg-blue">
        <div class="bg-red">LOREM</div>
        <div class="bg-red">LOREM</div>
    </div>

</body>
</html>
Tolkar
  • 34
  • 7
  • As i said, they will be placed one under the other one if you use more of these divs. How can i place them on a line from left to right? – Catalin Sandu Nov 26 '17 at 15:33
  • Oh, I misunderstood. I edited my post. Just add "flex-direction: row;" in the parent's styling. – Tolkar Nov 26 '17 at 15:39
-1

Set the outer div to relative and then the inner div Set a width and height. Position to absolute, top 50%, left 50% and use transform: translate(-50%,-50%) to position.

user3068032
  • 36
  • 7