This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 1 year ago.
i have a parent div which contain two child. i want that first child to be centered while the other to be at the end of flex but using margin auto does center the first child according to the space left for him not according to the size of parent div.i mean margin on left should be different from margin on right as i have second element on the right of first one.so how to make margin calculated responsively or if there another solution to center one element and make the other at end.I would like to apologize for this long question.
HTML
<div class="parent">
<h2 class="firstchild">line of text</h2>
<div class="secondchild">
<form>
<input type="text" placeholder="search.. " name="search">
<span class="searchbutton"><button id="button" type="submit" name="search" >Search</button></span>
</form>
</div>
</div>
parent
.parent{
display: flex;
flex-wrap: wrap;
flex-direction:row;
width: 100%;
first child
.firstchild{
margin-top: 10px;
text-align: center;
margin-bottom: 5px;
margin: 0 auto;
justify-self: center;
position: absolute;
second child
.secondchild {
margin-left: 0px;
margin-bottom: 5px;
margin-right: 0px;
position: relative;
justify-self: flex-end;
Thank you for everyone who replied.
maybe i express my question wrongly but i have found the solution using java script
the solution is:
<script>
function myFunction() {
var elmnt=document.getElementById('parent');
var w=elmnt.clientWidth;
var m=(w-256.922)/2;
var r=m-240.594;
document.getElementById("child1").style.marginLeft=m+'px';
document.getElementById('child1').style.marginRight=r+'px';
}
window.onresize=myFunction;
</script>
where 256.922 and 240.594 is width of first and second child respectively.
justify-self doesn't work in flexbox. But you can use margin-left: auto to do what you want.
Your code will work if you remove all the positioning in your first and second child, also second child does not need to justify-self: flex-end.
.parent{
display: flex;
flex-wrap: wrap;
flex-direction:row;
width: 100%;
}
.firstchild{
margin-top: 10px;
text-align: center;
margin-bottom: 5px;
margin: 0 auto;
justify-self: center;
/* position: absolute; */
}
.secondchild {
margin-left: 0px;
margin-bottom: 5px;
margin-right: 0px;
/* position: relative;
justify-self: flex-end */
}
You could use margin-left: auto to make it centerlize:
.firstchild
{
margin: auto; /* to align center*/
}
or if you want to center horizontally or vertically
.firstchild
{
margin: 0px auto; /* to align center horizontally*/
margin: auto 0px; /* to align center veritcally*/
}
Related
I've checked similar posts and they are not helping.
I want my innermost div to appear in the center of the parent div.
For example:
<container>
<div class="parent">
<div class="child">
</div>
</div>
</container>
The parent div is a flex item inside an inline-flex container. margin: 0 auto is only allowing it to horizontally align, but I need it vertically aligned as well. Height and width are 80% of parent div.
How do I go about this?
Also, I will need to add a display: none at times. When I don't want display: none active, what can I leave display as?
Edit:
.Card {
width: 150px;
height: 220px;
border: 2px solid rgb(218, 186, 186);
margin: 10px;
display: inline-flex;
}
.FaceUp {
display: none;
}
.FaceDown {
height: 80%;
width: 80%;
margin: 0 auto;
}
I've tried margin, justify-content, justify-items, align-content, align-items, vertical-align. None seem to be working.
FaceDown and FaceUp will never display at the same time. They are the child/sibling divs inside the parent div.
Did u try writing:
parentDiv {
display: flex;
justify-content: center;
align-content: center;
}
childDiv {
align-self: center;
}
Because every parent should have display: flex; in order to affect a child
try this
position: absolute;
top: 50%;
transform: translateY(-50%)
This question already has answers here:
Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
(5 answers)
Why does margin-top work with inline-block but not with inline?
(3 answers)
Closed 3 years ago.
This may be basic but i read in a book that to center something inside a div you should :
margin-left: auto;
margin-right: auto;
width:70%;
so you give it a width and set auto margin.
With button it will not work and I also need to add this to make it work :
display: block;
Why in this case we need it block ?
inline/inline-block elements can't have auto value for margin.
If you want to center button without making it a block, you can use text-align: center on it's parent.
Also, button don't have to be a block if it's being centered by a flex/grid parent.
I added a few examples below.
.wrapper-center {
padding: 20px;
border: 1px solid blue;
text-align: center;
}
/* ----- */
.wrapper {
padding: 20px;
margin-top: 20px;
border: 1px solid red;
}
.centered-button {
display: block;
margin: 0 auto;
}
/* ----- */
.flex-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
padding: 20px;
border: 1px solid green;
}
<div class="wrapper-center">
<button>Test</button>
</div>
<div class="wrapper">
<button class="centered-button">Test</button>
</div>
<div class="flex-wrapper">
<button>Test</button>
</div>
Display: block
This gives the section or div a whole part of the page to itself, starting from what is essentially a new line and taking up the width of the page. Margin and width statement only affect it because of this. Inline or otherwise don’t have this property requirement due to the fact that their properties become relative to other elements on the same line
This question already has answers here:
Why doesn't percentage padding / margin work on flex items in Firefox and Edge?
(2 answers)
Closed 4 years ago.
I have div that contains flexbox element with iframe inside (made to be responsive using CSS).
In Firefox that parent's height is 0 for some reason.
.container {
border: 2px black solid;
}
.flexbox {
max-width: 854px;
margin: 0 auto;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
background: yellow
}
.flexbox div {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
flexbox div span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
<div class="container">
<div class="flexbox">
<div>
<span>
TExT
</span></div>
</div>
</div>
The best way to see this please look at my example on JSFiddle: https://jsfiddle.net/5jLqugy6/
I believe its because you have not set the height of the parent container or the child element within the parent.
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
I want to add a text beside a centered text without moving the centered text.
Example: C is a centered text and s is a side text:
+++++
sC
+++++
ssC
+++++
sCCC
Is this possible with CSS?
Sure, use flexbloxes like this. This is gross, but at least it works.
.container {
display: flex;
justify-content: center;
align-items: stretch;
}
.container > * {
border: 1px solid #ccc;
padding: 6px 12px;
box-sizing: border-box;
}
.side {
flex: 1 1 50%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.side:nth-child(1) {
justify-content: flex-end;
}
.content {
width: 200px;
text-align: center;
}
<div class="container">
<div class="side"><p>Side text</p><p>Side text</p></div>
<p class="content">Content text</p>
<div class="side"></div>
</div>
It sounds like if you are trying to display text before or after the element in which case you may want to read over https://developer.mozilla.org/en-US/docs/Web/CSS/::before
See the example below.
.container {
width: 100%;
background: #eee;
}
.center-text {
display: table;
margin: auto;
}
.center-text:before {
content: "s";
font-size: smaller;
}
.center-text:after {
content: "s";
font-size: smaller;
}
<div class="container">
<div class="center-text">CCC</div>
</div>
Is this possible with CSS? Yes it is. If you're just exploring and playing around with CSS, you can do it by using :before or :after pseudo element. Set the positioning of the parent element to relative then set the pseudo element's position to absolute so you can control its positing inside the centered element div.
However it is a bad practice if you will use this in your work.
div.centered-element{
text-align: center;
width: 100%;
background-color: #f0f0f0;
position: relative;
}
div.centered-element:before{
content: "sss";
color: red;
position: absolute;
left: 30%;
}
<div class="centered-element">C</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 8 years ago.
I have something like this:
[ [span][link] ]
but I would like something like this:
[ [span][link] ]
Where the <span> and <a> element inside <div> element are centered in the middle horizontally
span and a element have auto width
div has hardcoded width 250px
How to do that?
My current CSS code is not working, it's centered to the left ;(:
a {
margin: 0px;
padding: 0px;
display: block;
float: left;
width: auto;
}
span {
float: left;
}
div {
display: inline;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 200px;
}
and HTML:
<div>
<span>Name</span>
Link
</div>
Use inline-block display
<div class="outer">
<span>Name</span>
Link
</div>
CSS:
span, a {
display: inline-block;
}
.outer {
text-align: center;
margin-left: auto;
margin-right: auto;
background: yellow;
width: 500px;
float:left;
}
jsFiddle Demo
Remove the floats from the a and the span and instead float the divs. Try replacing your CSS with this:
a {
margin: 0px;
padding: 0px;
}
div {
text-align: center;
width: 200px;
float: left;
}