1

Okay, I've seen a lot of answers but I still could not get this correctly. I have this green column in which there are 2 smaller columns: enter image description here I need to make the yellow column in the center. Like this: enter image description here I tried multiple methods, but none work. Of course margin-top works, but then the mobile screen is not ok. I know that there is a simple solution out there.

Here is the HTML:

<div class="container-fluid bg-success" style="margin-bottom: 50px; margin-top: 50px;">
<div class="container"> 
    <div class="row">
        <div class="col-lg-12"> 

            <!-- LEFT SIDE - Easy Cafe -->
            <div class="col-lg-7 bg-warning">
            <center class="jumbotextstyle">
                <div style="font-size: 100px;"> Easy Cafe <br> </div>
                <hr width="50%" style="border: 1px solid black; margin: 10px;">
                Makes ordering easier
            </center>
            </div>

            <!-- RIGHT SIDE - Picture-->
            <div class="col-lg-5 bg-danger">
            <center>
                <img src="images/s8.png" class="img-responsive" alt="mobilepicnotworking">
            </center> 
            </div>

        </div>
    </div>
</div>

CSS:

.jumbotextstyle{
    font-size: 250%;
}
IkePr
  • 900
  • 4
  • 18
  • 44

1 Answers1

0

Give your parent div (Green Div) a css property Display: Flex and align-items: center.

This will put both your div to horizontally and vertically to the center.

Example on JSFiddle

HTML CODE :

<div id="container"><!-- flex container -->

<div class="box" id="bluebox"><!-- flex item -->
    <p>DIV #1</p>
</div>

<div class="box" id="redbox"><!-- flex item -->
    <p>DIV #2</p>
</div>

CSS CODE :

#container {
    display: flex; /* establish flex container */
    flex-direction: row; /* make main axis horizontal (default value) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center; /* center items vertically, in this case */
    height: 300px; /* for demo purposes */
    border: 1px solid black; /* for demo purposes */
    background-color: #eee; /* for demo purposes */
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;
}

#bluebox { background: aqua; }
#redbox { background: red; }
ksilentstorm
  • 105
  • 9