This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
As the title states, I am not able to center my content vertically.
When I inspect the divs, I have this bit of empty space below my divs and I don't know where that is coming from.
Perhaps that's the problem, since when I go into the dev tool styles and put in <line-height: 3> it centers.
I don't wish to hardcode things like this, and flex normally works, but I'm totally stumped here.
If you need to see anything else, please let me know!
.table-page-nav-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.arrow-btn {
text-align: center;
width: 50px;
height: 50px;
border-radius: 4px;
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
.page-index-inner {
text-align: center;
width: 244px;
height: 50px;
border-radius: 4px;
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
margin: 0px 20px;
}
<div class="table-page-nav-wrapper">
<div class="arrow-btn"><</div>
<div class="page-index-inner">Why won't I center correctly?</div>
<div class="arrow-btn">></div>
</div>
It is centered correctly. The outer div is centered vertically. What you want to achieve is centering the contents of the div vertically.
So either you make the inner div a flex container itself by adding display: flex to it and then vertically centering the contents with align-items: center or you could just give the inner div a line-height of 50px since the height of it already hard-coded. This will only work with a text without line-breaks.
As #DOM explained the code is technical correct.
The common missunderstanding is, that flexbox works on the immediate inner elements of the wrapping flexbox-container but not on the childs or the content of this inner elements.
As centered inner grids are typical css tasks: additional to #DOM's solution here is a general css helper class I use and which does the trick. Just add it to div.table-page-nav-wrapper:
.center_HV,
.center_HV > div {
display: flex;
justify-content: center;
align-items: center;
}
That works on line breaks too.
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 last month.
What I want to do is to use <p onclick='this.innerHTML++'>0</p> and make this code have a black background that covers the whole screen and center the text in it. I want it to not have a body element or an html element as I just want the <p> element.
I tried using box-shadows and the transform property in the style attribute.
<p onclick='this.innerHTML++' style='color: white; width: 100vw; height: 100vh; transform: translate(-50vw, -50vh); box-shadow: 50vw 50vh black;'>0</p>
That just displayed a quarter of the viewport a fourth of whiteness which meant the box-shadow wasn't working. I found it added a margin, so I removed it. It still didn't work. It centered the text though. I know how to do it with 2 elements, but I want to keep the code with only the <p> element.
This time I tried using the background property.
<p onclick='this.innerHTML++' style='color: white; width: 100vw; height: 100vh; background: black; text-align: center'>0</p>
This time the code did everything correctly except positioning the text vertically centered.
Is it possible to do this all in 1 element, center the text both horizontally and vertically, and display a black background that covers the whole screen?
To center content you can either use flex or grid:
display: flex;
justify-content: center;
align-items: center;
or with grid, it's just two lines:
display: grid;
place-content: center;
I created a snippet for you. I changed your <p> tag to a button, since this would be more semantic valid HTML. You can of course use any element you like.
button {
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: grid;
place-content: center;
font-size: 3rem;
color: #fff;
background-color: rebeccapurple;
}
<button onclick="this.innerHTML++" type="button">0</button>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
This question is about understanding how flex effect the display of child elements. The centering is peripheral and not the point of the question. Please see comments below if the question does not make sense.
From my reading of how flex works it should do the opposite and make the child elements behave like block elements.
However, in this minimal example it makes the paragraph element behave like an inline element.
I am using flex to center content.
<style>
/* display flex should cause child elments to behave like block elements
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/
#wrapper{
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
#image{
margin: 0px;
border: 1px dotted #888888;
}
#percentage{
margin: 0px;
font-size: 40px;
font-weight: bold;
border: 1px dotted #888888;
}
</style>
<div id="wrapper" >
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" alt="wikimedia" width="128" height="128">
<p id="percentage"> 10%</p>
</div>
Basically, flexbox has a default flex-direction of row that's why the elements are inline, to make them appear on like block elements you can set flex-direction to column.
I am building a website from an image given to me to practice (it comes from his employer as a test). I know he mainly used flexbox in the entire site, so im trying to stick with that (havent learned grid at all). On the top of the website is a sort of 'header' that includes some button links, a logo, and a search bar in the middle. The searchbar is located vertically about halfway down the entire header.
I am trying to do that without using a margin hack, but none of the typical align or justify commands seem to work. I also set a height, still nothing. Any thoughts?
Included a height property, also tried various commands like: align-item, align-items, align-self, justify-content, etc.
#searchbar {
height: 100px;
width: 15rem;
flex: 1;
/* margin-top: 15px; */
margin-right: -5px;
text-align: center;
}
I want to move the search bar down to the middle of its parent element, but nothing seems to work.
You need to apply align-self: center to the #searchbar - asyou can see - the display: flex is applied to the parent, then align-self to the div. This centeres it withing the parent. Then you will need to apply that same logic to the contents of the searchbar div itself - in order to center them within it. and adding justify-content: center to center the content horizontally within the parent div as well.
I have applied a yellow background on the parent div, a red border on the searchbar div to demonstrate the relationship and the centering of the inner div and a blue border on the text withon the searchbar div to show its centered..
#wrapper {
height : 200px;
display: flex;
background: yellow
}
#searchbar {
height: 100px;
width: 15rem;
flex: 1;
text-align: center;
align-self: center;
border: solid 1px red;
display: flex;
align-items: center;
justify-content: center
}
#searchbar-content {
border: solid 1px blue;
}
<div id="wrapper">
<div id="searchbar">
<span id="searchbar-content">Search bar content goes here</span>
</div>
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Vertically align text next to an image?
(26 answers)
Flexbox: center horizontally and vertically
(14 answers)
How do I vertically align text in a div?
(34 answers)
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 4 years ago.
I am trying to center align a span inside a div, which also contains an img element.
.element {
display: inline-block;
}
.element img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-right: 20px;
}
.element span {
display: inline-block;
}
<div class="element">
<img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<span>hello</span>
</div>
or see this fiddle
However the text wont vertical align. I have looked primary at this question. However vertical-align: middle does nothing here.
I also looked at this question. However I will rather avoid anything position: relative & position: absolute workarounds for this. I also tried messing the line-height with no luck.
I even tried to set height: 100%on the span, as this question suggests, but that does nothing either.
I basically looked at bunch of questions here on SO, it seems like css is so weird about this, that there basically is 12 approaches for a simple thing like this. Yet I can't seem to get 1 of them to work in my occasion.
What is up with this behavior?
EDIT:
Marked as duplicate to How to Vertical align elements in a div? - I have explained that these solutions with line-height and vertical align doesn't work in my case as explained in the original question. The accepted solution did not work in this case. How is it a duplicate?
The answer here is probably to use flexbox. If your flex-direction is row (which is default), you can use align-items to center the elements vertically and justify-content to justify the row to the left (the "start" of the flex container). Let me know if you have any questions!
.element {
align-items: center;
display: flex;
justify-content: flex-start;
}
.element img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-right: 20px;
}
.element span {
display: inline-block;
}
<div class="element">
<img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<span>hello</span>
</div>
Use flexbox for this. Sample:
.element {
display: flex;
align-items: center;
}
Use align-items: center for vertical align and justify-content: center; if you need also horizontal align center.
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
How to use safe center with flexbox?
(3 answers)
Closed 5 years ago.
I have the following situation, the text get cuts off at the top when it not longer fits inside the container. What can I do to fix that? I'd still like the text to be centered if it's smaller than the container, and I can't change the container size.
div {
display: flex;
align-items: center;
width: 100px;
height: 50px;
overflow: auto;
word-break: break-word;
}
<div>
sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd
</div>
The problem here is caused by the fact that when using align-items (or justify-content) to center a flex row item, it will, by design, overflow at its top/bottom (or left/right).
To solve that a new keyword, safe, is introduced, though not many browsers support it yet.
How to use safe center with flexbox?
The other option is to use auto margin's, though with the given markup you can't, as the text doesn't have an inner wrapper (well, it has an anonymous one, though those we can't target with a CSS selector).
So by adding an inner wrapper (fiddle with wrapper) you can use auto margin's, and is well explained here:
Can't scroll to top of flex item that is overflowing container
But sometimes we just can't change the markup, and when, here is a little trick, using the pseudo elements, and use auto margin's on them.
To vertical center the text we also need the flex direction to be column so the pseudo is rendered above/below.
Stack snippet
div {
display: flex;
flex-direction: column; /* added */
width: 100px;
height: 50px;
overflow: auto;
word-break: break-word;
border: 1px solid gray;
}
div::before, div::after {
content: '';
}
div::before {
margin-top: auto; /* added */
}
div::after {
margin-bottom: auto; /* added */
}
<div>
sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd
</div>
<div>
sdjhf
</div>
If you wrap the text into another tag, and set margin: auto 0; it seems to be working well.
div {
display: flex;
width: 100px;
height: 50px;
overflow: auto;
word-break: break-word;
background: pink;
margin-bottom: 20px;
}
span {
margin: auto 0;
}
<div>
<span>sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd</span>
</div>
<div>
<span>sdjhfkah</span>
</div>