Menu
I'm trying to center the dotted line horizontally with CSS. At the moment, it appears at the bottom. Is there a way I can offset it with -5px or something?
HTML
<div class="divider"></div>
CSS
.divider {
background: aqua url("styles/images/divider-stars.png") no-repeat center 0;
height:30px;
padding-bottom: 10px;
width: 100%;
margin: 20px auto;
float: left;
border-bottom: 2px dotted #b38b0d;
}
203
To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
To center an image, we have to set the value of margin-left and margin-right to auto and make it a block element by using the display: block; property. If the image is in the div element, then we can use the text-align: center; property for aligning the image to center in the div.
You do this by setting the display property to “flex.” Then, define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
rectangle{ width:200px; height:300px; background-color:#000000; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } This css code will definitely work for putting rectangle in the center.
no. But you can create another element that have the border and move it within the .divider
html
<div class="divider">
<div class="inner"></div>
</div>
css
.inner {
margin-top:19px;
border-bottom: 2px dotted #b38b0d;
}
Demo: http://jsfiddle.net/5xMG7/
197
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
