.container{
display: flex;
align-items: center;
justify-content: center;
position:relative;
}
.text{
position:absolute;
left:0;
}
<div class="container">
<img src="http://lorempixel.com/800/800/" />
<div class="text">
<p>
some text here to be vertical aligned on the left where the image starts;
</p>
</div>
</div>
I would want that text to be on top of the image, centered vertically, on the left. Is there any other solution except of using:
position:absolute;
left:0;
I feel that it should be possible doing it with some flex attributes.
Thanks!
.container {
position: relative;
}
.text {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
}
<div class="container">
<img src="http://lorempixel.com/800/800/" />
<div class="text">
<p>
some text here to be vertical aligned on the left where the image starts;
</p>
</div>
</div>
What I did:
Make a container the size of the image: simply put the img alone in a div
Make the above container a positioning context: position: relative
Create a container for aligning stuff in it, the size of its positioning context: position: absolute and all edges on 0
Center vertically: display: flex plus align-items: center
Of course, there are other lots of ways to achieve the same effect (even completely avoiding position absolute), but I would recommend using positioning in this situation.
was struggling with this. Played with position with bad results until it hit me.
Just flex-direction: column (or column-reverse if necessary)
Related
HTML
<div id="flexbox-container">
<h1 id="test1">test1</h1><h1 id="test2">test2</h1><h1 id="test3">test3</h1>
</div>
CSS
#flexbox-container {
display:inline-flex;
}
#test1 {
float:left;
}
#test2 {
justify-content:center;
align-items:center;
text-align:center;
align-self:center;
align-content:center;
}
#test3 {
position:relative;
left:1000px;
}
Why does test2 not center itself in the flex? I would prefer not to have to set px or margin to get it to centre. I tried all sorts of aligning stuff on it yet it still sticks to the left. I need the three items to be inline, so setting it to flex wouldn't work (though it does center align if I make it flex), PLEASE HELP IVE BEEN TRYING FOR DAYS
https://codepen.io/throwaway123/pen/mdpJJKY
Only this much code is enough. No need for all those styles for separate h1 tags. You have to give the aligning styles to the parent div.
#flexbox-container {
width: 100%;
display:inline-flex;
justify-content: space-between;
}
<div id="flexbox-container">
<h1 id="test1">test1</h1>
<h1 id="test2">test2</h1>
<h1 id="test3">test3</h1>
</div>
Basically that isn't how flex works.
You don't want the contents of the second item to be justified within itself, you want the container to have that element centered.
If you scrap all the positioning of the three items you can get flex to do the work for you. There are several ways of telling it how you want the items set out in the line. For example justify-content: space-between.
From MDN:
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
#flexbox-container {
display: inline-flex;
justify-content: space-between;
width: 100vw;
}
<div id="flexbox-container">
<h1 id="test1">test1</h1>
<h1 id="test2">test2</h1>
<h1 id="test3">test3</h1>
</div>
Using IDs for css is bad practice. I'd suggest you to start using class selectors
Anyway, here is solution to your problem :
<style>
#flexbox-container {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
If you want the h1 tags centered too you can wrap the h1 tag by a div. Then you can assign the div text-align: center CSS Property.
#flexbox-container {
background: green;
display:flex;
justify-content: space-between;
text-align: center;
}
#flexbox-container div {
width: 100%;
}
<div id="flexbox-container">
<div>
<h1 id="test1">test1</h1>
</div>
<div>
<h1 id="test2">test2</h1>
</div>
<div>
<h1 id="test3">test3</h1>
</div>
</div>
I am trying to have an input form with radio buttons where each option is stacked on top of each other and all of them are aligned (center) by the radio button, not by the length of its label.
End result I am looking for:
My best approach so far was to center everything, with position: absolute. Something like this.
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center
However, with this approach the options are influenced by the length of the text.
Removing the text-align above, it removes the centering altogether...
Place the three radio buttons within a container that is within another container like so.
<body>
<div class="center-horizonally">
<div class="radio-btn-container">
<div class="radio-1">yes</div>
<div class="radio-2">no</div>
<div class="radio-3">maybe</div>
</div>
</div>
</body>
<style>
.center-horizonally{
display: flex;
justify-content: center;
}
</style>
The most outer container has display: flex; and justify-content: center; which will horizontally center the second container that has the buttons. The second container keeps the three radio buttons aligned vertically on the left. This is probably not the best way to do this but it should work.
The easiest way to center elements is by using display: flex; on parent element and margin: auto; on child:
.container
{
display: flex;
height: 100vh;
}
.container .middle
{
display: flex;
flex-direction: column;
margin: auto;
}
<div class="container">
<div class="middle">
<div>Do you enjoy pizza with pineapple</div>
<div class="middle">
<div><label><input type="radio" name="blah">Yay</label></div>
<div><label><input type="radio" name="blah">Nay</label></div>
<div><label><input type="radio" name="blah">Never heard of it</label></div>
</div>
</div>
</div>
I want to make a very simple navbar with HTML and CSS (so simple I prefer to do it without Bootstrap), made of just three short texts, situated on the leftmost, center, and rightmost part of one single line.
My idea is that I cut the line in two halves, put the left & middle part in the first half, and the rightmost part in the second half. So I tried the following :
.div_left {
float: left;
position: absolute;
}
.div_right {
float: right;
text-align: right;
position: absolute;
}
.container_for_mininavbar {
width: 100%;
position: absolute;
}
.mininavbar_left_half {
width: 50%;
float: left;
position: absolute;
}
.mininavbar_right_half {
width: 50%;
float: right;
position: absolute;
}
<div class="container_for_mininavbar">
<div class="mininavbar_left_half">
<div class="div_left">Left Text</div>
<div class="div_right">Center Text</div>
</div>
<div class="mininavbar_right_half">
<div class="div_right">Right Text</div>
</div>
</div>
But that doesn't work, all the texts are on top of each other.
What is the correct way to do this?
Just remove position absolute.
I'll suggest to use flexbox to do this and don't use float anymore
.div_left {
float: left;
}
.div_right {
float: right;
text-align: right;
}
.container_for_mininavbar {
width: 100%;
}
.mininavbar_left_half {
width: 50%;
float: left;
}
.mininavbar_right_half {
width: 50%;
float: right;
}
<div class="container_for_mininavbar">
<div class="mininavbar_left_half">
<div class="div_left">Left Text</div>
<div class="div_right">Center Text</div>
</div>
<div class="mininavbar_right_half">
<div class="div_right">Right Text</div>
</div>
</div>
And this is a little example with flexbox
.container_for_mininavbar {
width: 100%;
border: 1px;
display: flex;
}
.container_for_mininavbar div {
flex: 0 1 33.33%;
border: 1px solid #000;
text-align: center;
}
<div class="container_for_mininavbar">
<div>Left Text</div>
<div>Center Text</div>
<div>Right Text</div>
</div>
So, you want some links to the left, some to the center and the rest to the right?
The easiest and most effective way (by me) is to use Flexbox.
So, you need a container div, named "navigation" (or however you want) which contains another 2 divs, one for the left side, and one for the right side.
Now, assign to the navigation div, the following:
display: flex; /* is going to display the div flex */
justify-content: space-between; /* this is where magic happens, it will push the items from the nav div, which are the other 2 divs to the left and right side*/
flex-flow: row nowrap;
The first property is for it to be displayed in a row, you can set it to column too, and the nowrap is not going to let the content to deform in some sort of way, if you set that to wrap, of course, it will wrap under, but I suggest letting that nowrap, but I don't think flex-flow is 100% neccesary in this situation
Now, the flexbox works for the other 2 divs as well, maybe you want the links in the left-side div to be "justify-content: space-between;" or space-evenly, or center, space-around, etc.
I recommend you to learn Flexbox, it's very useful and simple to use.
I hope this answer will help you. :)
And to center the links in each div, use align-items: center; , it will center the links on the Y scale. (which is top-bottom)
EDIT: If you want center links too, it's the same thing, just make another div between the left-side div and the right div. And the justify-content: space-betweeen; it's going to have the same effect. And if you don't link how it scales, you can always use the margins in the div.
What I have set up is a flexbox that contains 3 children: the previous button, a div that contains the slideshow, and the next button. I have the flexbox set to justify-content: center, but the arrows stick to the far sides of the flexbox instead of right next to the slide div on either side. There is a gap between each arrow and the slide that won't go away unless I make the browser window narrower so the flexbox doesn't have any extra room. Setting justify-content to center should be keeping them all together.
I'm having the same issue with the slide container as well. It is also a flexbox and contains 3 children: a title, the image, and numbers at the bottom. When I shrink the window, the slide image shrinks to fit, but the title and numbers both stay stuck to the top and bottom of the flexbox instead of clustered in the middle with the image.
I would like this to be dynamic so I won't have to adjust the CSS as much with media queries for a number of different breaking points.
Things I have tried:
setting the margins to 0px for all children
setting the padding to 0px for all children
putting the buttons inside the slideshow container instead of the
current parent and setting the slideshow container to flex
every other option for justify-content (center, flex-start, flex-end, etc); none of them seemed to have any effect on the children
removing the width attribute from my slideshow container and setting it to auto (this made the slides disappear)
removing the height attribute from my slide container (this did fix the issue, but it also caused the slide to extend past the boundaries of its container)
I am also using some javascript that probably doesn't need to be included, but it sets each new slide's display to block and each previous slide's display to none. In order for this slideshow to work, I am under the impression that the slides need to their position set to absolute, and their parent container set to relative.
Here is a fiddle with the exact code I am using. I initially tried to simplify it to ask this question by removing container1 and the description on the left, but then I couldn't replicate the problem I was having. I am wondering if it has something to do with the height or width attributes of one of elements.
https://jsfiddle.net/kj7wzr5a/
.container1 {
width: 85%;
height: 650px;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
text-align: center;
}
.left {
width: 45%;
text-align: center;
margin-left: 30px;
margin-right: 20px;
}
.descrip1 {
margin-top: 20px;
}
.right {
height: 100%;
width: 45%;
display: flex;
justify-content: center;
align-items: center;
}
.flex {
height: 100%;
display: flex;
flex-direction: column;
align-content: center;
}
.slideshow-container {
height: 100%;
width: 360px;
margin-top: 25px;
position: relative;
}
.slide {
height: 90%;
width: 100%;
display: none;
position: absolute;
}
.slide:first-child {display: block}
.slide {
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}
.slide img {
height: 100%;
width: 100%;
margin: 0px;
object-fit: contain;
}
/* Next & previous buttons */
.buttons {
height: auto;
}
<div class="container1 bodytext">
<div class="left">
<div class="descrip1">
<p>Blah blah text</p>
</div>
</div>
<div class="right">
<div class="buttons">
<a class="slider_nav prev"><</a>
</div>
<div class="slideshow-container">
<div class="slide">
<div class="flex">
<div class="text">New Character</div>
<img src="1.png" style="width:100%">
<div class="numbertext">1 / 10</div>
</div>
</div>
<div class="slide">
<div class="flex">
<div class="text">New Character Stats</div>
<img src="2.png" style="width:100%">
</div>
</div>
</div>
<div class="buttons">
<a class="slider_nav next">></a>
</div>
</div>
</div>
I am fairly new to coding and haven't had any formal training.
I want to position one div in the background and the other div in the foreground. The foground div should be centered automatically vertically and horizontally according to the size of the div in the background, or the size of the container div.
I wonder if there is an elegant way to do it using Flexbox. Sometimes, before I start arranging the flexbox elements I see the different children overlap. So far I have failed to duplicate this. The advantage is that if we can get the elements to overlap using flexbox, we can center the foreground both vertically and horizontally easily using the margin:auto;.
A different way to do this is to use position relative and absolute. For example:
<div class="container" style="position:relative; height:400px; width:100%;">
<div class="backgorund" style="height:100%; width:100%; background-color:green;">
<div class ="child" style="position:absolute; left:50%;">
<div class="foreground" style="position:relative; right:50%">
<p>I'm centered horizontally, but not vertically</p>
</div>
</div>
</div>
but then I'll have to add flexbox inside the foreground div to center the foreground vertically.
I’m not sure if I got you right. But you would just need display: flex; for releasing the magic, align-items: center; for horizontal, and justify-content: center; for vertical aligning nested element(s).
html, body {
height: 100%;
}
.container {
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: pink;
}
.item {
padding: 2em;
color: white;
background-color: hotpink;
}
<div class="container">
<div class="item">
<p>Lorem ipsum dolor sit amet</p>
<p>Consectetur adipisci velit</p>
</div>
</div>
The answer would be no. You can use flexbox and you can center things - and you can stack those things on top of each other, but there isn't currently a special flexbox way of doing that. You'll have to use another positioning.
I use this technique often. Note that you'll need a relatively positioned parent
#mixin absolute-translate-center() {
float: none; /* just in case */
position: absolute;
margin-left: 50%;
margin-right: 50%;
transform: translate(-50%, -50%);
}
.thing {
#include absolute-translate-center();
}
or
absolute-translate-center()
float: none
position: absolute;
margin-left: 50%
margin-right: 50%
transform: translate(-50%, -50%)
.thing
absolute-translate-center()