I'm pretty new to CSS and I'm trying to vertical-align: middle some text inside a div. This has been asked before, but I can't get any of the solutions to work for me, so I must be missing something obvious.
I've tried:
Having the text in a <p> tag and in CSS adding vertical-align: middle; to the <p> tag.
Having the text in a <p> tag and in CSS adding vertical-align: middle; to the parent div.
Having the text in a <div class="flex-container"> and in CSS adding
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
As here: https://jsfiddle.net/dt3kvmdm/
The parent div doesn't have a fix height in px. Instead it's a percentage. One solution to a similar question suggested that this could be a problem, but I'm not clear on it. It would be helpful to me to be able to keep it as a percentage.
I'll be very happy to hear any suggestions!
Thanks a lot!
Nick.
You need to use display: flex on parent element or set height: 100% on child element Fiddle
.ProjectTitle {
background-color: green;
position: absolute;
width: 100%;
height: 20%;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.flex-container {
font-family: "Taviraj", serif;
color: #000;
letter-spacing: 0.11em;
}
<div class="ProjectTitle">
<div class="flex-container">
Project Title
</div>
</div>
I'm not sure if I completely understand what you're wanting, but see if this helps:
HTML:
<div class="ProjectTitle">
<div class="flex-container">
<p>Project Title</p>
</div>
</div>
CSS:
.ProjectTitle {
background-color: green;
position: absolute;
width: 100%;
height: 20%;
bottom: 0;
}
.flex-container {
display: flex;
justify-content: center;
align-items: center;
font-family: "Taviraj", serif;
color: #000;
letter-spacing: 0.11em;
line-height: 20%;
height: 100%;
}
.flex-container p {
color: #ffffff;
vertical-align: middle;
}
Fiddle: https://jsfiddle.net/dt3kvmdm/1/
Related
So, I am building a banner, the content needs to be responsive.
I am using flex with center. But the issue is the dollar amount needs to be centered and not the $+dollar amount.
I have tackled this with a negative margin, but it is clunky. I was wondering is the was a way to mark the $ as not included in the center calculation.
.flex-center {
padding: 3rem;
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 2rem;
}
.offer {
font-size: 3rem;
font-weight: bold;
}
.offer sup {
font-size: 2rem;
}
<div class="flex-center">
<div>Some normal text</div>
<div class="offer"><sup>$</sup>250</div>
<div>Text</div>
</div>
If you meant to exclude the $ sign away from the document flow so that only the price tag width was considered for centering, one solution could be:
Remove the <sup> element entirely
Make the container position:relative
make a new css rule adding the pseudo element ::before positioned absolute to show the $ sign using the content css property
EDIT: As #TemaniAfif suggested in comments, I replaced the fixed left
offset with the right offset set as 100%
This is a demo:
.flex-center {
padding: 3rem;
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 2rem;
}
.offer {
position: relative;
font-size: 3rem;
font-weight: bold;
}
.offer::before {
content: '$';
font-size: 2rem;
position: absolute;
/*left: -1.25rem;*/
right: 100%;
}
<div class="flex-center">
<div>Some normal text</div>
<div class="offer">250</div>
<div>Text</div>
</div>
My footer is in fixed position and I am seeing the same view on every device. I also want to fix the LinkedIn logo in white div and orange div above it. So that my website will have same view on every device. but I am not to fix them. Can anyone please help?. I have been trying from last 2 weeks.
I am not able to add my codes here. so attaching the same in screenshot
html code
css code
This how my website currently looks like//i.stack.imgur.com/VNVDN.jpg
This is how I want my website to look like//i.stack.imgur.com/VNVDN.jpg
Actually I made an easy template of what you need. It is pretty simple so I am sure that you will get the point. Please ask me whatever you want.
HTML
<div class="footer-wrapper">
<div class="orange-container">
</div>
<div class="social-container">
<img src="#">
</div>
<div class="black-container">
<p>text text text</p>
<p>text text text</p>
</div>
</div>
CSS
.footer-wrapper {
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
position: relative;
bottom: 0;
}
.orange-container {
width: 100%;
height: 40px;
background: orange;
}
.social-container {
width:100%;
display: flex;
justify-content: center;
}
.social-container img {
background: red;
width: 30px;
height: 30px;
}
.black-container {
width: 100%;
background: black;
padding-top: 1rem;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
}
.black-container p {
text-align: center;
margin: 0;
}
It is better way to use display:flex or display:grid when you want to center something. Padding is used to make small spaces. Also with the display flex or grid you can easily handle the responsive view of your website pretty easy.
Please I am also advising you to check how to make your questions good Click Here
I hope my answer will be helpful for you, and again if not, don't hesitate to ask anything :)
You can use flexbox. And assign to the main part flex-grow.
* {
padding: 0px;
margin: 0px;
}
.w {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh;
}
.header {
background: orange;
padding: 5px;
}
.main {
flex-grow: 1;
}
.footer {
background: black;
height: 40px;
text-align: center;
color: white;
padding: 5px;
}
<div class="w">
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
</div>
I've got some problems with specific element positioning. Could you give me any advice how to make it works?
It seems that buttons should be a part of content div but I don't really know how to do this. I tried many ideas but without any result.
Thanks in advance :)
My current code:
.header {
width: 100%;
background-color: red;
height: 65px;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
.item {
width: 700px;
height: 100px;
background-color: grey;
}
<div class="header"></div>
<div class="container">
<div class="item" style="background-color: red; height: 65px;">
<button>test</button>
</div>
<div class="item"></div>
</div>
I have no clue how to set div with buttons to be above header div. I tried with position relative but without success.
I know that it can be achieved by setting maring-top in container div. But is there any more elegant solution?
Well if you wanted to make a template as you mentioned above in the attached picture, I would say you won't need to define a new div above your container as the independent div and you should wrap all your header items into one division and make them flex with related justify-content and align-items, the flexbox with reacting to this as two different items that two of them (first button and header item) are wrapped into one div and the other one is a simple button (you can wrap it into another div too if you wanted) then with the justify-content: space-between they will force to the two endpoints of the division with space between them. Then you should do the same with your first wrapped items in div but in this one, you should add specific width to the division to make the justify-content: space-between work properly.
I add the simple code snippet below for more illustration, you can use it freely.
.header {
background-color: red;
padding: 10px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header button {
background-color: yellow;
font-weight: bold;
border: none;
}
.header span {
color: white;
}
.header-left {
width: 130px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container {
max-width: 100%;
}
.item {
width: 200px
min-height: 400px;
margin: 0 40px;
padding: 100px;
background-color: lightgrey;
}
.item > p {
text-align: center;
}
<div class="header">
<div class="header-left">
<button>btn</button>
<span>header</span>
</div>
<button>btn</button>
</div>
<div class="container">
<div class="item">
<p>content</p>
</div>
</div>
If I am not getting it wrong, then you want the code of the button to be inside of container and on web page it should be shown on header. If this is what you are looking for then you can try the below code:
.header {
width: 100%;
background-color: red;
height: 65px;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
position: relative
}
.container button {
position: absolute;
top: -30px; // you can change it accordingly
}
.item {
width: 700px;
height: 100px;
background-color: grey;
}
<div class="header"></div>
<div class="container">
<button>test</button>
<div class="item"></div>
</div>
No matter how I style an element, none of the Flexbox styles I apply work. I have searched everywhere for a solution but could not find any (apologies if this is a duplicate as I could not find an answer to the problem).
I have created a CodePen here.
HTML:
<div class="test">
<div class="test2">
</div>
</div>
CSS:
* {
padding: 0;
margin: 0;
}
.test {
height: 10em;
width: 10em;
background: #333;
}
.test2 {
height: 2.5em;
width: 2.5em;
background: #ff0000;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
text-align: center;
}
Thanks in advance for any help provided.
You need to add those CSS rules to the parent element instead.
When you set display: flex on an element, its direct children elements become flexbox items. In your example, the .test2 elements didn't have any children elements, so I assume you were probably wanting to add display: flex on the parent element instead.
.test {
height: 10em;
width: 10em;
background: #333;
display: flex;
align-items: center;
justify-content: center;
}
.test2 {
height: 2.5em;
width: 2.5em;
background: #ff0000;
}
<div class="test">
<div class="test2"></div>
</div>
Here's what I've got so far:
http://codepen.io/anon/pen/jPQjMZ
HTML:
<div class="container">
<div class="info">
This Is Info
</div>
</div>
<div class="container">
<div class="info">
This Is More Info
</div>
</div>
CSS: (LESS)
body {
background: #000;
}
.container {
background: #eee;
width: 150px;
height: 200px;
display: inline-block;
vertical-align: top;
}
.info {
background: #404040;
color: #fff;
display: flex;
display: -ms-flexbox;
align-items: center;
-ms-align-items: center;
font-size: 1.4em;
padding: 1em;
text-align: center;
height: 20px;
//overflow: hidden;
}
This works great in Chrome and Firefox. But in IE10, the text fails to wrap:
What's going on and how do I fix this? I don't necessarily have to use flexbox, but it's the only way I could figure out how to center the text perfectly within the div whether it's one line or two.
If you wrap your info text in an extra <span>, you can use the double line-height trick from this other question to vertically center the text (without using flexbox):
How do I vertically align something inside a span tag?
Note: I had to remove the vertical padding and instead set the total height to 3em
.info {
background: #404040;
color: #fff;
font-size: 1.4em;
padding: 0 1em;
/*height: 3em;*/
line-height: 3em;
text-align: center;
}
.info span {
display: inline-block;
line-height: 1em;
vertical-align: middle;
}
Updated Pen: http://codepen.io/anon/pen/aOQegy