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;
}
Related
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>
I'm having trouble vertically centering 2 elements (svg + text). I used flexbox to center these elements, and they are perfectly centered if I do not precise any font-size. But when I put a smaller font-size on the text (0.8em instead of 1em), it creates a small space on top of the text instead of centering it. Horrible colors are to show the blue space on top of the text. Does anyone know how to fix this ?
I've already tried adding text-align: center; vertical-align: middle;
The parent div (blue) centers elements with flex: display: flex; align-items: center;
Thanks a lot
Edit: Here is a snippet, I somehow can't find how to link a file (the svg) ?
a {
text-decoration: none;
}
/*Parent div*/
.parent {
width: 20vw;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1vw;
background-color:skyblue;
}
/*Svg*/
.parent img {
width: auto;
height: 3vh;
margin-right: 10px;
background-color: rosybrown;
}
/*Text*/
span {
font-size: 0.8em;
background-color: seagreen;
}
<div class="parent">
<div>
<img src="https://cdn0.iconfinder.com/data/icons/feather/96/heart-512.png"><span>Favoris</span>
</div>
</div>
I would try to set the line-height of the text element to the same value as your font-size. I would also not define a height for the text element (I am not sure if you are doing this or not, since you did not provide your code).
So something of the sort:
div.container {
display: flex;
align-items: center;
padding: 10px;
background-color: #4169E1;
}
div.container img {
width: 40px;
height: 40px;
margin-right: 20px;
background-color: #BC8F8F;
}
div.container span {
font-size: 20px;
line-height: 20px;
color: #4B565C;
background-color: #2E8B57;
}
<div class="container">
<img src="https://cdn0.iconfinder.com/data/icons/feather/96/heart-512.png"/>
<span>Favoris</span>
</div>
Found the problem:
<a href="#">
<div class="parent">
<img src="img/coeur.svg">
<span>Favoris</span>
</div>
</a>
I just had to invert the <a> tag and <div> and everything is well centered.
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I've created a div in HTML:
.Div {
border: 1px solid red;
margin: 1px;
text-align: center;
vertical-align: middle;
font-size: 20px;
height: 80px;
}
...
<div class="Div">
Just testing my Div.
</div>
...
Output:
I want the text to be in the middle of this rectangular, vertically and horizontally. How should I make it happen?
To be mentioned, I didn't use this div inside the main body, it's used inside another div; But in that i also have text-align: center;. I don't know if it's important; But i can provide more details about this code if needed.
P.S: I'm very new to css and html. Please accept my apologies if this code doesn't meet some standards.
There are several ways to do this. Since you, yourself tried to use vertical-align in the first place, so vertical-align will only work with display: table-cell;. In order to achieve it, you should set your div, display to table-cell and then you should also define a specific width for your div (I just went with 100vw to fill the available viewport).
So your final code should be something like this:
.Div {
border: 1px solid red;
margin: 1px;
text-align: center;
display: table-cell;
vertical-align: middle;
font-size: 20px;
height: 80px;
width: 100vw;
}
<div class="Div">
Just testing my Div.
</div>
But if you want some generic approach for this you should use flexbox instead. In order to use flexbox, you should define three specific properties to meet your requirement.
display: flex;. This will indicate your div as flex items and then their children should follow flex rules.
align-items: center;. This will indicate all of your items should align in the middle of your div horizontally.
justify-content: center;. This will indicate all of your items should align in the middle of your div vertically.
.Div {
border: 1px solid red;
margin: 1px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
height: 80px;
}
<div class="Div">
Just testing my Div.
</div>
You may use display: flex;, justify-content: center; and align-items: center in your class Div
You may go http://howtocenterincss.com/, to auto-generate the code that centre text, image or div.
.Div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
margin: 1px;
/* text-align: center;
vertical-align: middle; */
font-size: 20px;
height: 80px;
}
<div class="Div">
Just testing my Div.
</div>
This question already has answers here:
Padding for Inline Elements
(3 answers)
Closed 4 years ago.
I have a link that looks like a button and I would like to set the background colour to be different.
However, I don't understand why my holder div does not take the same height as it's child. I doesn't take into consideration padding.
Is there a clean way to fix this?
.link {
background-color: green;
padding: .9rem 3rem;
}
.holder {
background-color: red;
text-align: center;
margin-top: 40px;
}
<div class="holder">
LINK
</div>
You need to add display: inline-block to your .link element:
.link {
background-color: green;
padding: .9rem 3rem;
display: inline-block;
}
.holder {
background-color: red;
text-align: center;
margin-top: 40px;
}
<div class="holder">
LINK
</div>
By default, <a> elements are display: inline, and do not have their layout impacted by the containing block. That is to say, they do not allow for a height or width to be set, and do not respect vertical padding and margins.
The <a> tag default display is inline, so its parent will display it vertically along its line box (based on the vertical-align property), you need to change it to display: block or inline-block, depending on what you’re looking for;
.link {
display: block;
background-color: green;
padding: .9rem 3rem;
}
.holder {
background-color: red;
text-align: center;
margin-top: 40px;
}
<div class="holder">
LINK
</div>
Because by default a tag will have the property of display: inline; so make sure to change the anchor tag to display: inline-block; or display: block;
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
http://jsfiddle.net/UmHNL/2/
<div class="container">
<span>Some text, yay</span>
</div>
<div class="container">
<span>Some text, yay. But shit time, there is alot of text, so we get a problem with breaking lines and the given height :( How can I align vertical now?</span>
</div>
<style>
.container {
width: 100%;
height: 50px;
line-height: 50px;
border: 1px solid black;
}
.container span {
padding-left: 30px;
}
</style>
This solution works great until the screen-width is too small - breaking my text into several lines.
When I google the problem I find so many crazy over-complicated solutions with javascript and divs to push my content in place.. Can anyone help me make this work without adding more markup? :)
There's no need to support Internet Explorer and older browsers.
Thanks
You should try this:
.container {
width: 100%;
height: 50px;
border: 1px solid black;
display: table;
text-align: center;
}
.container span {
display: table-cell;
vertical-align: middle;
}
Update you CSS to
.container {
width: 100%;
height: 50px;
display: table-cell;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
.container span {
}