how to align elements horizontally in css
.row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.block {
width: 100px;
}how to align elements horizontally in css
.row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.block {
width: 100px;
}html - How to horizontally center an element
You can apply this CSS to the inner <div>:
#inner { width: 50%; margin: 0 auto; }
Of course, you don't have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.
If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:
#inner { display: table; margin: 0 auto; }
It will make the inner element center horizontally and it works without setting a specific width.
Working example here:
#inner { display: table; margin: 0 auto; border: 1px solid black; } #outer { border: 1px solid red; width:100% }
<div id="outer"> <div id="inner">Foo foo</div> </div>
EDIT
With flexbox it is very easy to style the div horizontally and vertically centered.
#inner { border: 1px solid black; } #outer { border: 1px solid red; width:100%; display: flex; justify-content: center; }
<div id="outer"> <div id="inner">Foo foo</div> </div>
To align the div vertically centered, use the property align-items: center.Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
