CODEWITHSUNDEEP
htmlcssbootstrap-4
nnmmss
nnmmss

Reputation: 2974

starting div s on the same top position

I have 3 div s inside a another div, I want two of them starts at the same top position and the other one be in center of the other. this is the code

<div class="col-lg-8 col-md-8 col-xs-12  ">
    <div class="col-1 div-container-product-images   showbordergreen ">
        <div class="div-product-images-list">
            @foreach(var item in Model.Images)
            {
              <div class="mt-2 d-block"><img src="~/@item" width="70" height="70" /></div>
            }
        </div>
    </div>
    <div class="col-6 text-center  d-inline-flex showborderred">
        <img src="~/@Model.Images.FirstOrDefault()" width="200" height="300" style="padding: 10px;" />
    </div>
    <div class="col-4 d-inline-flex showborderblue">
        Title
    </div>
</div>

and this is css

 .div-container-product-images {
display: inline-flex;
vertical-align: middle;
 }

.div-product-images-list{
margin: auto;    
  }
 .showborderred {
 border: 2px solid red;
 }

.showborderblue {
 border: 2px solid blue;
 }
.showbordergreen {
border: 2px solid green;
 }

but it become like this: enter image description here

I want the blue box and red box starts at same top position and the green box in middle height of red box

how can I do that?

Upvotes: 0

Views: 41

Answers (2)

Prakash Rajotiya
Prakash Rajotiya

Reputation: 1033

I hope below code helps you.

I have wrapped columns in one row and added class .align-items-start for align column to top. and added .align-self-center class on last column which you want to align center.

.div-container-product-images {
display: inline-flex;
vertical-align: middle;
 }

.div-product-images-list{
margin: auto;    
  }
 .showborderred {
 border: 2px solid red;
 }

.showborderblue {
 border: 2px solid blue;
 }
.showbordergreen {
border: 2px solid green;
 }
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-start">
<div class="col-4    ">
    <div class="div-container-product-images w-100   showbordergreen ">
        <div class="div-product-images-list ">
            <img src="~/@Model.Images.FirstOrDefault()" width="200" height="300" />
        </div>
    </div>
    </div>
    <div class="col-4 text-center  d-inline-flex showborderred">
        <img src="~/@Model.Images.FirstOrDefault()" width="200" height="300" />
    </div>
    <div class="col-4   align-self-center">
    <div class="showborderblue">
        Title
        </div>
    </div>
</div>

Upvotes: 0

Nick Teo
Nick Teo

Reputation: 38

Enable flex on your parent container. Then add align-items-start class to it and align-self-center to the green box.

Upvotes: 1

Related Questions