Jack Mathers Jack Mathers - 6 months ago 30
HTML Question

get two div to be on the same margin line and stay there even if the browser's size is changed

I have two divs. One is around a h4 and the other around a p. I want the p to be in the middle so its set as margin-left: auto; and margin-right:auto; I dont want the h4 to also be in the middle I want it to be set so its inline with the left side of the div.

---------------page size-----------------

---<h4>---
--------<p>-------
---In the center--
----of the page---
------------------

-----------------------------------------


Here is a little example of what I want it to be like. If I manually set the margin-left to fit in with the position then if someone has a different screen size then it won't be there. This is for a school project so I am not very good at html or css so forgive me if its really simple or stupid.

Answer

Margin: auto for Right and Left will not work because it gets all width. Margin: auto works when you has set fixed width for and element. In this case, you can give "Text-align: center" to

and it make it simple.

div{
  border: 1px solid #000;
  padding: 20px 0;
  width: 300px;
  height: 100px;
  margin: 20px auto;
}
div.h4-wrapper{
  margin: 0 0;
}
p{
  text-align:center;
}
<div class="h4-wrapper">
  <h4>On Left Side</h4>
</div>

<div>
  <p>On middle.</p>
</div>

Comments