This question already has answers here:
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 4 months ago.
I'm trying to center my div in html code. It has image and texts also, so when I try centering it div changes it's form. I tried it by adding display: flex; in my div element but images and texts goes to one place and they cover each other.
Here is my code:
body {
background-color: #d5e1ef;
}
div {
width: 320px;
background-color: white;
border-radius: 20px;
overflow: hidden;
padding: 16px;
display: flex;
}
img {
max-width: 100%;
border-radius: 10px;
}
<div>
<img src="./image-qr-code.png" />
<h1>Improve your front-end skills by building projects</h1>
<p>
Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
</p>
</div>
div {
margin: 0 auto;
}
You can use margin: 0 auto; to align the center your entire div.
assuming you are trying to center the content verticaly:
div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
use margin: 0 auto; to center the div.
use flex-direction: column; to align your element vertically.
* {
border: 1px solid red;
}
body {
background-color: #d5e1ef;
}
div {
width: 80vw;
height: 40vh;
min-height: fit-content;
background-color: white;
border-radius: 20px;
overflow: hidden;
margin: 0 auto;
padding: 16px;
display: flex;
flex-direction: column;
}
img {
max-width: 100%;
border-radius: 10px;
}
<body>
<div>
<img src="./image-qr-code.png" />
<h1>Improve your front-end skills by building projects</h1>
<p>
Scan the QR code to visit Frontend Mentor and take your coding skills to
the next level
</p>
</div>
</body>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 months ago.
Im trying to center the div "input" below the div "InputBelow" by using "flex-direction: column".
However when I try to use it, it breaks the "justify-content; center".
I want to both center the main div "border" in the middle of the screen, while aligning the other 2 elements inside of it.
.border {
height: 300px;
width: 700px;
margin: auto;
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
border: 3px solid;
border-radius: 45px;
border-color: black;
display: flex;
justify-content: center;
flex-direction: column;
/* If I remove this, justify content works fine. If I add it, justify-content just stops working */
}
.calcText {
color: black;
font-size: 44px;
margin: 35px;
}
.value {
height: 10px;
width: 50px;
}
<div class="border">
<div class="calcText">Input Below</div>
<input class="value" type="text">
</div>
Thanks to Amaury for the solution. For some reason I thought aling-items was for vertical alignment and justify-content for horizontal alignment.
Turns out I had to remove justify content.
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 10 months ago.
I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support.
You can do it in multiple ways. I'll start with grid because I love grid.
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Grid layout enables an author to align elements into columns and rows.
If you want all the elements contained in an element to be vertically centered you can use on the parent element the property display: grid; and after the property align-items: center;. For example see this code:
section {
height: 90vh;
width: 100%;
background-color: blue;
display: grid;
align-items: center;
}
div {
height: 100px;
width: 100px;
background-color: brown;
}
<section>
<div></div>
</section>
if you want a specific alignment for each element, you can avoid specifying the property align-items: center; for the parent element and use the property align-self: center; directly on each element it contains. See this example:
section {
height: 90vh;
width: 100%;
background-color: blue;
display: grid;
}
div {
height: 100px;
width: 100px;
background-color: brown;
align-self: center;
}
<section>
<div></div>
</section>
another way is through the use of flexbox. The principle is more or less the same.
you can apply a rule that applies to all contained elements:
section {
height: 90vh;
width: 100%;
background-color: blue;
display: flex;
align-items: center;
}
div {
height: 100px;
width: 100px;
background-color: brown;
}
<section>
<div></div>
</section>
or specify the position of each:
section {
height: 90vh;
width: 100%;
background-color: blue;
display: flex;
}
div {
height: 100px;
width: 100px;
background-color: brown;
align-self: center;
}
<section>
<div></div>
</section>
If you want to learn more about these topics I leave you the link of the site from which I learned them: https://developer.mozilla.org/en-US/docs/Learn
I hope I have been helpful!
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 4 years ago.
When content in a box wraps, the width of that box extends to fill up all available space. Is there a way to have the width of the box be its "effective visible size"?
Here's code and a codepen to try:
div {
display: flex;
align-items: center;
justify-content: center;
width: 17rem;
}
span {
border-bottom: 1px solid #444;
text-align: center;
font-size:29px;
}
<div>
<span>
Helloworld this willwrap
</span>
</div>
https://codepen.io/rasteiner/pen/aXKwdZ?editors=1100#0
I'd like to have the border-bottom be only as wide as the widest text line.
Using a <br> tag is not an option.
I could set width: min-content on the span, but that would make the text wrap more than necessary.
In your js fiddle just give you span a width inside of the div.
<div>
<div class="myClass">
<span>
Hello world this will wrap
</span>
<div>
</div>
and here is the css
body {
font-size: 3rem;
}
.myClass {
height: 16rem;
width: 30%;
background-color: #dedede;
display: flex;
align-items: center;
justify-content: center;
margin: 2rem;
}
.myClass span {
width: 50%;
border-bottom: 1px solid #444;
text-align: center;
}
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 4 years ago.
I want to display my Container in the center of the page. For that, I used flex in CSS.
I am putting the code below:
* {
background-color: #653706;
}
.nav {
padding: 10px;
}
input {
background-color: #fff;
}
.fex {
display: flex;
justify-content: center;
align-items: center;
}
<div class="fex">
<input type="text" placeholder="enter your name" class="nav" />
</div>
I used display: flex; justify-content: center; align-items: center;. But after using this, right now container display on the top of the page and in the center
But I want the container into the center of the page both horizontally and vertically.
Approach :
Give height 100% to html, body and the container div.
html,
body {
height: 100%;
margin: 0;
}
* {
background-color: #653706;
}
.nav {
padding: 10px;
}
input {
background-color: #fff;
}
.fex {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
<div class="fex">
<input type="text" placeholder="enter your name" class="nav" />
</div>
This question already has answers here:
How to center a flex container but left-align flex items
(9 answers)
Closed 4 years ago.
Scenario :
I have a list of inline-block elements that I'm able to center.
But when the number of elements don't fit on a line, Todo : I would like
them to be justified to the left.
I've been messing with flex boxes
and other things, but I seem to only be able to do one at a time
(center the entire element or justify the elements left).
Anyone know
how to accomplish this?
Below is the jsfiddle I've been messing around with, as well as some images that are hopefully helpful.
What I have:
What I want:
https://jsfiddle.net/bonbonlemon/bu1y93Ls/52/
Code:
jsx:
<div>
<button onClick={this.handleClick}>Increase!</button>
<div id="items-box">
{ items.map((item, idx) => (
<div className="item-box" key={idx}>{item}</div>
))}
</div>
</div>
CSS:
#items-box {
margin: 50px;
text-align: center;
}
.item-box {
display: inline-block;
height: 100px;
width: 110px;
margin-right: 15px;
margin-top: 20px;
outline: thin solid black;
}
Try to use flexbox:
https://jsfiddle.net/hapu8ny2/
html,
body {
min-height: 100%;
}
#items-box {
display: flex;
flex-direction: row;
flex-wrap: wrap
}
.item-box {
display: flex;
min-height: 100px;
min-width: 110px;
margin-right: 15px;
margin-top: 20px;
outline: thin solid black;
}
Note: see i use min-height and min-width instead