I have a fixed size div with a background image, and I want text to be aligned directly in the middle. Vertically and horizontally.
I'm able to get the horizontal alignment, but can't for the life of me get it to be vertically aligned. I've seen answers on here, but couldn't find anything that worked for a fixed size div.
You can see the blue border around the span. If I could just move that down to be always centered for any text(as long as it doesn't get too big) I'd be there.
div {
background-image: url(http://i.imgur.com/I86rTVl.jpg);
width: 500px;
height: 300px;
border: 1px solid red;
}
span {
position: absolute;
text-align: center;
width: 500px;
border: 1px solid blue;
font-size: 72px
}
<body>
<div>
<span>Testing for fiddle</span>
</div>
</body>
Out of many possible solutions, here is a modern flexbox technique.
Check the browser compatibility table for Flexbox
div {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; /* Center vertically */
background-image: url("http://i.imgur.com/I86rTVl.jpg");
border: 1px solid red;
height: 300px;
width: 500px;
}
span {
/* position: absolute; Remove */
white-space: nowrap; /* Avoid text wrapping */
text-align: center;
width: 500px;
border: 1px solid blue;
font-size: 72px
}
<body>
<div>
<span>Testing for fiddle</span>
</div>
</body>
Absolute positioning
With the parent set to position:relative set the child's position to top:50% and the translate it back up by half it's own height.
div {
background-image: url(http://i.imgur.com/I86rTVl.jpg);
width: 500px;
height: 300px;
border: 1px solid red;
position: relative;
}
span {
position: absolute;
text-align: center;
width: 500px;
top: 50%;
left: 0%;
transform: translateY(-50%);
border: 1px solid blue;
font-size: 72px
}
<body>
<div>
<span>Testing for fiddle</span>
</div>
</body>
Try the good old table/table-cell technique. Works down to IE9 :)
div {
background-image: url(http://i.imgur.com/I86rTVl.jpg);
width: 500px;
height: 300px;
border: 1px solid red;
display:table;
}
span {
display:table-cell;
text-align: center;
width: 100%;
vertical-align:middle;
border: 1px solid blue;
font-size: 72px
}
<body>
<div>
<span>Testing for fiddle</span>
</div>
</body>
https://jsfiddle.net/kvqLnchw/1/
div {
background: url(http://i.imgur.com/I86rTVl.jpg) no-repeat;
width:500px;
height: 300px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
text-align:center;
}
span {
border: 1px solid blue;
font-size: 72px
}
Related
So I am trying to create a logo and a menu icon in the header but for some reason, they are always overflowing the height of the header which I have strictly specified! Why is that ?
And I know I can hide out the overflowing items by using overflow:hidden; property but it is not always a good case.
For example, I tried to create a hamburger icon but I could not because of this overflow issue. The menu lines were working as if the entire element is shown but I had to hide it out so that it could fit into the header.
Here is the code -
<header>
<div class="logo">
Elvis
</div>
<div class="menu">
Hamburger Menu
</div>
</header>
In CSS -
*{
padding:0px;
margin:0px;
}
header{
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
border: 2px solid red;
}
.logo {
font-size: 33px;
text-decoration: none;
padding: 20px 30px;
background-color: green;
color: white;
}
.menu {
height: 100px;
width: 100px;
background-color: #bd4439;
}
Here is the codepen link -
https://codepen.io/raghav-sharma333/pen/eYeZYGO
Here is the image of the issue -
Overflowing content
So I just want to know :
Why is it happening?
&
How can it be prevented?
Basically you are forcing your elements to be higher than the header itself by giving them static heights (height 100px on the menu and padding-top/bottom 30px on the logo)
I updated your pen: https://codepen.io/penmasterx/pen/wvPGaGz
Using height 100%, so the elements adapt to the header.
Let me know if this solves your problem. If not, let me know in more detail what you're trying to accomplish.
What I added to the pen:
.logo {
height: 100%;
display: flex;
align-items: center;
/* removed padding top/bottom */
}
.menu {
height: 100%;
}
In such cases, it is better to use the position to manage the inheritance of the elements
I modified your code:
*{
padding:0px;
margin:0px;
}
header{
height: 60px;
align-items: center;
border: 2px solid red;
position: relative;
}
.wrapper{
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
position: absolute;
}
.logo {
font-size: 30px;
text-decoration: none;
padding: 20px 30px;
background-color: green;
max-height: 100%;
color: white;
}
.menu {
height: 100%;
width: 100px;
background-color: #bd4439;
}
<header>
<div class="wrapper">
<div class="logo">Elvis</div>
<div class="menu">Hamburger Menu</div>
</div>
</header>
First: the reason you use a 33px font which adds padding, then you use a height:100px on the menu while on your header you put a height:60px
you also need to add align-self: center on your flex-box
*{
padding:0px;
margin:0px;
}
header{
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
align-self: center;
border: 2px solid red;
}
.logo {
font-size: 17px;
text-decoration: none;
padding: 20px 30px;
background-color: green;
color: white;
}
.menu {
height: 60px;
width: 100px;
background-color: #bd4439;
}
I did it like 'Ali Memar' answer but the difference is the position of the texts. they are now in the middle of the div.
*{
padding:0px;
margin:0px;
}
header{
height: 60px;
align-items: center;
border: 2px solid red;
position: relative;
}
.wrapper{
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
position: absolute;
}
.logo {
font-size: 30px;
text-decoration: none;
padding: 20px 30px;
background-color: green;
max-height: 100%;
color: white;
text-align: center;
display: flex;
align-items: center
}
.menu {
height: 100%;
width: 100px;
background-color: #bd4439;
text-align: center;
display: flex;
align-items: center
}
<header>
<div class="wrapper">
<div class="logo">Elvis</div>
<div class="menu">Hamburger Menu</div>
</div>
</header>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
CSS
.as {
width: 300px;
height: 300px;
border: 5px solid red;
position: absolute;
left: 25%;
display: flex;
flex-direction: column;
}
.ab {
width: 60px;
height: 60px;
border: 2px solid green;
background-color: green;
}
.cd {
width: 60px;
height: 60px;
border: 2px solid blue;
background-color: blue;
}
HTML
$div class="as"$
$div class="ab"$123$/div$
$div class="cd"$123$/div$
$/div$
When I run it, I have green and blue boxes in a big red box. The green and blue are on the left corner.
since the parent container, which is "as" has display: flex and flex-direction: column
I can't go to the left bottom corner.
Is there a way to go to the left bottom? besides make it position: relative and bottom: %.
Thank you
Hi, I am practicing CSS
Do you need use property the justify-content with value flex-end to the left bottom corner
Look this example bellow
.as {
width: 300px;
height: 300px;
border: 5px solid red;
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.bottom-left {
justify-content: flex-end;
}
.bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
.ab {
width: 60px;
height: 60px;
border: 2px solid green;
background-color: green;
}
.cd {
width: 60px;
height: 60px;
border: 2px solid blue;
background-color: blue;
}
<p>Bottom left</p>
<div class="as bottom-left">
<div class="ab">123</div>
<div class="cd">123</div>
</div>
<p>Bottom right</p>
<div class="as bottom-right">
<div class="ab">123</div>
<div class="cd">123</div>
</div>
I have vertically aligned a circle within a rectangle div. Now, I need that circle to be positioned on the right-border of the parent div while also maintaining responsiveness. In other words, if that parent div resizes its width, the circle should remain glued to the right-border.
Here is an example of how I want the circle positioned:
Here is a JSFiddle of what I have so far. https://jsfiddle.net/jqvf8t2L/
HTML
<div class="outer">
<span>My Text</span>
<div class="circle">
</div>
</div>
CSS
.outer {
display: flex;
align-items: center;
padding: 20px;
position: relative;
border: 1px solid black;
width: 40%;
}
.circle {
border: 1px solid blue;
border-radius: 50%;
height: 20px;
width: 20px;
background-color: white;
}
span {
display: flex;
align-self: flex-start;
}
I have tried putting align-self: flex-end on the circle element and absolutely positioning the circle element to no avail.
Any help would be greatly appreciated!
Try it this way
.outer {
padding: 20px;
position: relative;
border: 1px solid black;
width: 40%;
}
.circle-holder {
position: absolute;
display: flex;
align-items: center;
right: -10px; /** half your outer padding **/
height: 100%;
top: 0;
}
.circle {
border: 1px solid blue;
border-radius: 50%;
height: 20px;
width: 20px;
background-color: white;
}
<div class="outer">
<span>My Text</span>
<div class="circle-holder">
<div class="circle">
</div>
</div>
</div>
I have this simple div with a button inside of it. justify-content: center; works fine using Firefox and Chrome, but does not work on IE 11:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
}
<div id="div">
<button id="button">HELLO</button>
</div>
My goal is that, when I use transform with rotate(90deg) or rotate(270deg), the button will fit into the div:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
transform: rotate(90deg);
}
<div id="div">
<button id="button">HELLO</button>
</div>
The height and width of the div and button are always the same, but are customizable.
As much as possible, I prefer not wrapping elements.
IE11 needs the parent to have flex-direction: column.
This example has your button rotated:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
transform: rotate(90deg);
}
<div id="div">
<button id="button">HELLO</button>
</div>
In my case I had to make the flex container's height 100%. justify-content worked without a problem after that.
I also had to make the (first level) children's max-width 100% to fix some content overflowing horizontally.
I have a frame containing a picture, I would like to add 2 buttons on the left and right side of it so users can click on those to view different pictures. I can handle JavaScript but I can't figure out a way to align these 2 buttons in proper positions. Thank you.
.frame {
background: #e0e0e0;
width: 300px;
height: 350px;
border: 1px solid #b9b9b9;
display: flex;
justify-content: center;
align-items: center;
}
.content {
background: #FFF;
width: 200px;
height: 200px;
}
.btn {
width: 15px;
height: 20px;
}
.btnLeft {
float: left;
background: red;
}
.btnRight {
float: right;
background: blue;
}
<div class="frame">
<div class="content"></div>
</div>
<div class="btn btnLeft"></div>
<div class="btn btnRight"></div>
You were on the right track but needed justify-content: space-between; not justify-content: center; and you needed to put .btnLeft and .btnRight inside .frame.
Here's what different values of justify-content do:
Image from CSS-Tricks
.frame {
background: #e0e0e0;
width: 300px;
height: 350px;
border: 1px solid #b9b9b9;
display: flex;
justify-content: space-between; /* not center */
align-items: center;
}
.content {
background: #FFF;
width: 200px;
height: 200px;
}
.btn {
width: 15px;
height: 20px;
}
.btnLeft{
background: red;
}
.btnRight {
background: blue;
}
<div class="frame">
<div class="btn btnLeft"></div>
<div class="content"></div>
<div class="btn btnRight"></div>
</div>
You may want to put the buttons inside the frame so you can reference the left and right positions. Then make those buttons position:absolute then set left and right position for each buttons
Code:
.frame {
background: #e0e0e0;
width: 300px;
height: 350px;
border: 1px solid #b9b9b9;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.btn{
position: absolute;
top: 50%;
transform:translateY(-50%);
}
.btnLeft{
left: 0;
}
.btnRight{
right: 0;
}
Updated fiddle:
https://jsfiddle.net/y0ty7t80/3/
First you could set the position of the frame to relative so it gets set as a root for following positionings. You could then set the positions of the two buttons both to "absolute" and put them inside of your frame so they get taken out of the text flow. By setting both to a left/right property of 0 and a top property of 50% they get placed exactly in the middle of the frame. Heres an example of what i mean:
.frame {
position:relative;
background: #e0e0e0;
width: 300px;
height: 350px;
border: 1px solid #b9b9b9;
display: flex;
justify-content: center;
align-items: center;
}
.content {
background: #FFF;
width: 200px;
height: 200px;
}
.btn {
width: 15px;
height: 20px;
}
.btnLeft{
position:absolute;
top:50%;
left:0;
background: red;
}
.btnRight {
position:absolute;
top:50%;
right:0;
background: blue;
}
<div class="frame">
<div class="btn btnLeft"></div>
<div class="btn btnRight"></div>
<div class="content"></div>
</div>