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.
Related
What I want it to look like, even in mobile view (resized)
What it looks like when shrunk
I have used padding-left:10px to create a space between text here.
Are you looking for something like this ?
.container {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.container span {
padding: 5px;
color: white;
text-transform: uppercase;
}
<div class="container">
<span>Home</span>
<span>Awards</span>
<span>Essay</span>
<span>Impact Made</span>
</div>
<div class="parentdiv">
<div><img src="img/noimage.png"></div>
<div class="bottom">
<p class="text1">Text1</p>
<div class="btn_area">
Text2
Text3
</div>
</div>
</div>
I've barely managed to make this layout with bunch of floats, margins, tops and lefts but the layout breaks at practically any other screen ratios.
I feel that I shouldn't be spamming float and margins when creating a layout. Are there any better options to build such layout that does not break catastrophically on ratio change?
I've tried googling but what I've found was mostly making asingle div or image responsive which I've succeeded, but can't apply it to my layout.
Try this out and see if you understand whats going on. I will also add a Tutorial for CSS-Flex as a link at the bottom. Make sure that you always post the code you have, that means HTML and CSS for a CSS Question etc. Im just answering directly here cause your Question implies, that you just tried floats. This solution here probably requires you to change some things to perfectly fit, so you can practice a bit with it:
body {
width: 100vw;
height: 100vh;
/*We need a fixed height and width of the parent-Element to make % values work in the child elements*/
}
.parentdiv {
width: 100%;
/*Careful, when your Content inside of this gets close to the maximum width and height of this div you need to change width: 100% or the layout will overflow*/
padding: 25px;
height: 50%;
/*This makes the Element a Flexbox-Element*/
display: flex;
/*sets the direction and the behaviour*/
flex-flow: row nowrap;
}
.left-area {
width: 40%;
display: flex;
flex-flow: row nowrap;
/*the following 2 attributes define where the content is positioned inside the Flexbox-element*/
justify-content: start;
align-items: start;
}
.left-area img {
width: 6rem;
height: 6rem;
/*I used the border to make the Img Look like yours cause i dont have the file*/
border: 1px solid grey;
border-radius: 50%;
}
.text1 {
font-size: 1.5rem;
color: grey;
font-weight: bold;
}
.right-area {
width: 15%;
height: 50%;
display: flex;
/*Column-Reverse means that you have a column but you start at the bottom of it, like it is standing on its head*/
flex-flow: column-reverse nowrap;
}
.btn_area{
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.text2 {
font-size: 1.2rem;
color: #7ad0bc;
font-weight: bold;
}
.text3 {
font-size: 1.2rem;
color: #d96060;
font-weight: bold;
}
<div class="parentdiv">
<div class="left-area">
<img src="img/noimage.png" alt="no image available">
<p class="text1">Text1</p>
</div>
<div class="right-area">
<div class="btn_area">
Text2
Text3
</div>
</div>
</div>
Tutorials for CSS-Flex: Tutorial Help-sheet
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;
}
I am attempting to implement this, simple enough design for a notification block.
Including the ability to respond by wrapping the text block on smaller screens, similar to the below;
The intention here is to center align the notification to the parent row, and preferably when the viewport is too small, have the text wrap and height of the horizontal banner on which it sits increase in height accordingly. This will be included in a bootstrap project (may affect floats etc).
Here is a pen showing one of the more simple approaches (and probably closest so far) I've been trying to achieve this.
*,
html {
font-family: arial;
font-size: 20px;
}
.extra-row {
text-align: center;
padding: 1em;
border: 1px solid #eee;
background-color: #ccc;
}
.notification {
text-align: center;
color: #fff;
white-space: nowrap;
}
.notification-circle {
width: 150px;
height: 150px;
background-color: #3D7A1A;
-moz-border-radius: 75px;
-webkit-border-radius: 75px;
border-radius: 75px;
position: relative;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: inline-flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
.notification-icon {
font-size: 5em;
}
.notification-block {
min-height: 150px;
line-height: 150px;
display: inline-block;
margin-left: -30px;
vertical-align: top
}
.notification-block span {
background-color: #54A127;
padding: 1em;
padding-left: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row extra-row">
<div class="col-lg-12">
<p>This is a row above</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="notification">
<div class="notification-circle"><span class="notification-icon">i</span>
</div>
<p class="notification-block"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</p>
</div>
</div>
</div>
<div class="row extra-row">
<div class="col-lg-12">
<p>This is a row below</p>
</div>
</div>
</div>
There's quite a few suggestions for vertically centering text in this manner, most appear to rely on line-height which is an issue here with wrapping the text.
This may not be the best approach due to using line-height, but the problems here are;
Preventing the circular container and text container from
wrapping.
Wrapping the text within the container while still
maintaining the overall height/vertically centered position of the text block.
Wrapping the text with a sensible line-height.
Adding white-space: nowrap; to the .notification element does prevent #1, but prevents the text from wrapping, which simply extends past the viewport.
Can anyone shed any light on a better approach? Any thoughts would be appreciated.
Many thanks,
Baps.
Hopefully this sets you on the right path.
I've removed a lot of unnecessary code. I've also removed the prefixes for the demo.
This adjustment may be all you need:
.notification {
display: flex; /* 1 */
align-items: center; /* 2 */
color:#fff;
}
.notification-circle {
flex: 0 0 150px; /* 3 */
height: 150px;
background-color: #3D7A1A;
border-radius: 75px;
display: flex;
align-items: center;
justify-content: center;
}
.notification-block {
margin-left: -50px; /* 4 */
background-color: #54A127; /* 5 */
padding: 1em; /* 5 */
padding-left: 75px; /* 5 */
z-index: -1; /* 6 */
}
.notification-block span { }
.notification-icon { font-size: 5em; }
Revised Codepen
Notes:
Make wrapper a flex container
Vertically center both flex children (.notification-circle and .notification-block)
Don't grow. Don't shrink. Remain fixed at 150px width.
Changed from margin-left: -30px
Relocated code from span child
Ensure .notification-block doesn't overlap .notification-circle
I'm trying to align the text in a h1 vertically to the middle, seeing as the text might wrap it needs to look nice whether it's 1 line or 2.
This is the css I use:
h1 {
font-size: 12pt;
line-height: 10pt;
min-height: 30px;
vertical-align: middle;
}
The html is quite simply:
<h1>title</h1>
No matter what value I enter for vertical-align, the text is always at the top of the h1 element.
Am I miss-understanding the vertical-align property?
No CSS hacks needed. If I understand you correctly, then you can use this CSS:
h1 {
font-size: 12pt;
line-height: 10px;
padding: 10px 0;
}
See demo fiddle which equals a minimum height of 30px;
A note about vertical-align: that style only works in conjunction with - and is calculated with regard to - the line-height style. So setting line-height at 10px, putting text with height 12pt leaves no space to align at all. But setting line-height to 30px would result in too much space between more lines of text. This shows a trick for vertical aligning several lines of text, but that is only needed when you have a fixed height container. In this case the container's height (the h1 element) is fluid, so you can use this simple padding solution.
I dont know about vertical align, but if you add height property and set height and line-height properties same you get the vertical align: center effect
h1
{
font-size: 12pt;
line-height: 50px;
height: 50px;
}
Center the H1 title using flexbox align items center and justify content center, see this example:
div {
padding: 1em;
border: 1px dashed purple;
}
h1 {
display: flex;
align-items: center;
justify-content: center;
}
<div>
<h1>Center this h1</h1>
</div>
Just add a float property and use padding-top: 50% for example:
h1 {
font-size: 12pt;
line-height: 10pt;
min-height: 30px;
position: absolute;
float: center; /* If you want it to be centered */
padding-top: 50%;
}
I used a CSS custom property (variable) and calc
:root {
--header-height: 100px;
}
* {
margin: 0;
padding: 0;
}
header {
font-size: 16px;
height: var(--header-height);
justify-content: space-evenly;
display: flex;
border-bottom: 1px solid #000;
}
h1,i {
font-size: 1.2rem;
display: inline-block;
padding-top: calc(var(--header-height) - 1.2rem);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<header>
<img src="https://placekitten.com/100/100" alt="logo" height="100">
<h1>
Kitten Stories
</h1>
<i class="fas fa-lock"></i>
</header>