0
139
ViewsDiv cannot be center aligned
Problem
When I try to use the code (see below), the div is only centered when I use width: 100px;.
<div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; margin-left: auto; margin-right: auto;">
Since I want to assign a much longer width to the text and set the width to 500px, the div is no longer centered.
<div style="border: solid 1px black; width: 500px; height: 100px; background-color: blue; margin-left: auto; margin-right: auto;">
Problem #2
The svg isn't centered
<div class="col-xl-3 col-lg-3 col-sm-6">
<div class="ud-single-feature wow fadeInUp" data-wow-delay=".25s" >
<div class="ud-feature-icon" >
<i class="lni lni-layers"></i>
</div>
<div class="ud-feature-content" style="position:absolute; width: 100%; text-align: center;">
<h3 class="ud-feature-title" style="text-align: center;">test</h3>
<p class="ud-feature-desc" style="text-align: center;">
test
</p>
<!-- <a href="javascript:void(0)" class="ud-feature-link">
Learn More
</a>-->
</div>
</div>
</div>
·
Juan Pablo Isaza
2 answers
Answer question0
Although your question does not define your desired goal, using margin-left or right will not justify the centre point of the page. Instead, consider using position: fixed in order to centre exactly in the page.
This should also mean you can set the dimensions of the div as you like.
<div style="background: blue; width: 100px; height: 100px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)">Div should be properly centred in page.</div>
·
Juan Pablo Isaza
Report
0
You can set the div as a child of another div like so :
<div style="justify-content: center; align-items: center; display: flex;">
<div style="border: 1px solid black; width: 500px; height: 100px; background-color: blue;">
</div>
</div>
·
Juan Pablo Isaza
Report
Answer question