This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
I want to make a registration form
How can I align this box like right under the head title?
h1 {
text-align: center;
}
.registrerBoks {
width: 300px;
height: 300px;
background-color: lightblue;
}
<h1>registrer</h1>
<div class="registrerBoks">
</div>
You can use margin:auto:
h1 {
text-align: center;
}
.registrerBoks {
width: 300px;
height: 300px;
margin: auto;
background-color: lightblue;
}
<h1>registrer</h1>
<div class="registrerBoks"></div>
Add margin: auto; to the registerBoks form.
h1 {
text-align: center;
}
.registrerBoks {
width: 300px;
height: 300px;
margin: auto;
background-color: lightblue;
}
<h1>registrer</h1>
<div class="registrerBoks">
</div>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 11 months ago.
I have a React component which is divided into 3 parts to hold 3 different data values - date, title and amount.
The layout looks good and aligned, but when I add a value in the first section (red), it will adjust my CSS is a very strange way which I can not figure out why.
First image shows the component itself, second image shows the component with HTML content inside it.
Expense.js
<div className="expense">
<div className="date">
<h6>DEMO!</h6>
</div>
<div className="title">
</div>
<div className="amount">
</div>
Expense.css
.expense {
border: 1px darkslategrey solid;
height: 100px;
display: flow-root;
}
.date {
display: inline-block;
background-color: darkred;
width: 20%;
height: 100%;
}
.title {
display: inline-block;
background-color: darkorange;
width: 60%;
height: 100%;
}
.amount {
display: inline-block;
background-color: darkgreen;
width: 20%;
height: 100%;
}
Add vertical-align: top to the three (inline-block) components. The default value for this is baseline, which is what you see in your second image.
Actually you don't need to add it three times, but can do it like this:
.expense > div {
vertical-align: top;
}
Full code (converted to plain HTML/CSS):
.expense {
border: 1px darkslategrey solid;
height: 100px;
display: flow-root;
}
.expense>div {
vertical-align: top;
}
.date {
display: inline-block;
background-color: darkred;
width: 20%;
height: 100%;
}
.title {
display: inline-block;
background-color: darkorange;
width: 60%;
height: 100%;
}
.amount {
display: inline-block;
background-color: darkgreen;
width: 20%;
height: 100%;
}
<div class="expense">
<div class="date">
<h6>DEMO!</h6>
</div><div class="title">
</div><div class="amount">
</div>
</div>
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 4 years ago.
I am making a chrome extension for the first time and am trying to centre text. And the moment I am using text-align: centre; to horizontally align it but can't figure out how to vertically align so at the moment my text looks like this:
If anyone could help that would be great.
ex) display: table
div{
display: table;
width: 100px;
height: 50px;
background-color: #000;
}
div p{
display: table-cell;
text-align: center;
vertical-align: middle;
color: #fff;
}
<div>
<p>chatter</p>
</div>
ex) flex
div{
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 50px;
background-color: #000;
}
div p{
color: #fff;
}
<div>
<p>chatter</p>
</div>
ex) position
div{
position: relative;
width: 100px;
height: 50px;
background-color: #000;
text-align: center;
}
div p{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #fff;
}
<div>
<p>chatter</p>
</div>
A really simple class I use for this is
.is-vertical-center {
display: flex;
align-items: center;
}
Hope this helps!
This question already has answers here:
Proper use of flex properties when nesting flex containers
(1 answer)
How to vertically align text inside a flexbox?
(13 answers)
Closed 5 years ago.
See the following:
.header {
background-color: black;
height: 100px;
min-height: 100px;
display: flex;
box-sizing: border-box;
align-items: center;
}
.itemLeft {
background-color: yellow;
box-sizing: border-box;
width: 50%;
padding-left: 20px;
padding-right: 20px;
padding-top: 18px;
padding-bottom: 18px;
}
.logo {
font-size: 32px;
background: green;
}
small {
background: Red;
}
.itemRight {
background-color: darkgoldenrod;
box-sizing: border-box;
width: 50%;
padding-left: 20px;
padding-right: 20px;
padding-top: 18px;
padding-bottom: 18px;
}
<div class="header">
<div class="itemLeft">
<a class="logo">Logo</a>
<small>tag</small>
</div>
<div class="itemRight">Menu</div>
</div>
See the code snippet, why isn't tag also being vertically aligned to the vertical center of the div? My goal is for Logo and Tag to both be vertically aligned in the center of the yellow div.
Thanks for any tips.
This question already has answers here:
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
Closed 7 years ago.
I'm trying to get everything centered horizontally but no go.I feel like it's because of the floats but if I remove them then the left_wrap and right_wrap don't sit beside each other.
https://jsfiddle.net/ydt17yvz/
.main_wrap {width:100%;}
.main_wrap_2 { position:relative;margin:0 auto;}
.left_wrap {background-color:#fff; width: 50%;
max-width: 930px; position:relative;float:left;}
.right_wrap {background-color:#fff; width: 50%;
max-width: 930px; margin-top:80vh;position:relative;float:left;}
You should use inline block, putting comment in the center of your 2 block (since else it'll count as a in your html document and will break the 50% 2 column layout)
Fiddle:
https://jsfiddle.net/dLgej4tx/3/
.main_wrap {
width: 100%;
}
.main_wrap_2 {
position: relative;
margin: 0 auto;
}
.left_wrap {
background-color: #fff;
display: inline-block;
width: 50%;
max-width: 930px;
position: relative;
vertical-align: top;
}
.right_wrap {
background-color: #fff;
display: inline-block;
width: 50%;
max-width: 930px;
margin-top: 80vh;
position: relative;
text-align: center;
vertical-align: top;
}
.carousel_wrap {
width: 92%;
margin-top: 80vh;
}
.content_wrap {
margin-top: 0px;
padding: 0;
position: relative;
clear: both;
}
.content {
margin: 0;
padding: 0;
font-family: 'Helvetica LT Std';
font-size: 12px;
line-height: 1.5;
width: 280px;
}
You will see, it'll make all your interaction easier and it will work as expected
This question already has answers here:
CSS Margin Collapsing
(2 answers)
Closed 7 years ago.
I have this code:
<div class='block'>
<div class='container'></div>
</div>
.block {
display: block;
height: 100px;
width: 100px;
background: black;
}
.container {
display: block;
width: 30px;
height: 30px;
background: red;
margin: 50px;
}
I can not understand why margin does not work inside the block?
JsFiddle: https://jsfiddle.net/39yy7a0q/
Try below css. I have added position to .container, and adjusted margin value as it should relevant to parents width. https://jsfiddle.net/39yy7a0q/4/
.block {
display: block;
height: 100px;
width: 100px;
background: black;
}
.container {
display: block;
position:absolute;
width: 30px;
height: 30px;
background: red;
margin: 35px;
}