Centralize objects within the div

Asked

Viewed 1,129 times

3

What is the best way to centralize objects within a div horizontally and vertically, being a responsive div with no fixed size, with width and Eight in %. Div is inside a bootstrap Row

div class="Row"> div class="col-Md-6"> div class="Here-this-my-div">

html css div

2 answers

1

Using of boostrap 4:

<div class="row justify-content-center">
    <div class="col-md-6 text-center">
        --- conteudo -----
    </div>
</div>

1

Centralize DIV by holding positions as 0 (zero)

.div {
position:absolute;
border:1px solid black;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}

Centralization of div with bootstrap:

exemplo

<div class="row">
    <div class="col-lg-6">Margem</div> 
    <div class="col-lg-6">       
        <div class="col-lg-3">Margem</div> 
        <div class="col-lg-6"> Conteúdo </div> 
        <div class="col-lg-3">Margem</div> 
    </div>
</div>

  • I do not know the edge pq, but tbm did not work.

  • the edge just to see where the div is. Then you can take it off. Put part of the code there in the question to help. This code I put is already well beaten, many people do so and it works, must be another detail. Fix this style right into the div you want to format, to make sure that the formatting will not be affected by any other css. And after it works, move the formatting to some other css rule.

  • But so it didn’t work, I supplemented the question with some data that may be relevant, see there.

  • I put it directly in div =div style="position:Absolute;margin: auto;top: 0; left: 0; bottom: 0; right: 0;" class="gallery-photos"> Even so it didn’t work, it continued in the upper left corner.

  • If the div you are formatting is inside other Ivs with bootstrap (Row and col), you can center using column formatting. Ex. div Row; div empty col-3; div with col-6 content ; div empty -col- 3

  • I don’t want to centralize DIV ROW I want to centralize another div I created inside Row = div class="Row"> div class="col-Md-6"> div class="Here-this-my-div">. I created an image gallery in the div but I can’t leave it centralized see prntscr.com/gis1ik

  • I included in the answer another example where the screen was divided with bootstrap and the div was centralized using other formatted div

  • It didn’t work here, look how it turned out http://prntscr.com/git97u

  • Does the green area have to be centralized? If so, probably the question is centralizing a higher object.

  • What has to center is the div with the images, it has to center within the green area. This green area is the Row lg-6 and I made a div inside it with the images, the brown part is another col where will have the description. I want aligned Vert and Horiz nothing solves kkkk and I’m not an expert yet. See http://prntscr.com/gitfbi

  • Try to put this CSS in the DIV you want to center: -webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%);left:50%;top:50%;... Maybe this DIV has to have position:relative; tb.

  • Look at this Fiddle: https://jsfiddle.net/hLdcx55e/

Show 7 more comments

Browser other questions tagged html css div

You are not signed in. Login or sign up in order to post.