Menu
I have a bottom toolbar like this:
<div style="float:left;width:100%;position:fixed;z-index:210;bottom:5px;">
<div style="float:left;width:928px;border:1px solid #000;background:url('/images/noise-bg.jpg') repeat-x;height:26px;padding:5px;">
Toolbar Content
<div>
</div>
But this toolbar is aligned on left side of the page. I want this DIV to be in the center of the page. Means same space area on the both side(left and right) of the toolbar. I can't fix the width of the toolbar, it is always 100%. I tried by setting fixed margin-left but it is different on different browsers/resolutions and iPad.
Any idea ?
Thanks
657
To move the inner div container to the centre of the parent div we have to use the margin property of style attribute. We can adjust the space around any HTML element by this margin property just by providing desired values to it. Now here comes the role of this property in adjusting the inner div.
If it is a block element (a div is), you need to set margin: 0 auto; , else if it is an inline element, you need to set the text-align: center; on its parent element instead.
1 — Vertical Center Using Auto Margins One way to vertically center is to use my-auto . This will center the element within it's flexbox container (The Bootstrap 4 . row is display:flex ). For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.
A horizontally aligned text with the CSS justify-content property. In the next example, we align the text of the <div> to the center with the CSS text-align property set to its "center" value. Also, we specify padding-top.
How to Center a Div Vertically and Horizontally with CSS Absolute Positioning and Negative Margins This is very similar to the method above to center an element vertically. Like last time, you must know the width and height of the element you want to center. Set the display property of the parent element to relative.
To adjust the inner div to the center position it is only necessary to write auto in the second parameter. Example: This example shows how to center a div inside a div with having non zero value for the first parameter of the margin property.
To move the inner div container to the centre of the parent div we have to use the margin property of style attribute. We can adjust the space around any HTML element by this margin property just by providing desired values to it.
Your div has width:100% and float:left, so it will be the same size of your page and you won't be able to center.
Set your width properly, remove that float and apply a margin: 0 auto rule on your div to center it.
I made a jsbin to show that working:
http://jsbin.com/obepad/2/edit
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
