This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I would like to have different margin for span elements. E.g., margin-top: 25px should be for the first span element and margin-top: 15px should be for the second element :
<div style="background: green">
<span style="display: inline-block; margin-top: 25px;">1</span>
<span style="display: inline-block; margin-top: 15px;">2</span>
</div>
However, the second span has margin-top: 25px.
Is it possible to set different margin-top for both span elements?
You need to put vertical-align: top. By default inline-block elements will sink to the level of their siblings.
Just to show they do have I added a border and put a flex display on the container thing. This also depends on how you want it visually. I added a second example where it moves without changing the border contained size.
.thing {
display: flex;
background: green
}
.thing-span {
display: inline-block;
border: yellow 1px solid;
}
.thing-span.one {
margin-top: 25px;
}
.thing-span.two {
margin-top: 15px;
}
<div class="thing">
<span class="thing-span one">1</span>
<span class ="thing-span two">2</span>
</div>
another way
.thing {
background: green
}
.thing-span {
display: inline-block;
border: yellow 1px solid;
vertical-align:top;
}
.thing-span.one {
margin-top: 25px;
}
.thing-span.two {
margin-top: 15px;
}
<div class="thing">
<span class="thing-span one">1</span>
<span class ="thing-span two">2</span>
</div>
Related
I want to display 2 separate strings in-line when the screen is big enough. But when the width gets smaller, I want the 2nd string to move down. I'm currently using flex wrap, but it's adding extra padding to the right when the 2nd string does the wrap. Is there a way to get rid of this padding?
Code: https://jsfiddle.net/Dirst/1ep2tq9y/61/
<div class="entire">
<div class="stringA">First string of text.</div>
<div> Second string of text.</div>
</div>
.entire{
border-style: solid;
display: flex;
flex-wrap: wrap;
width: fit-content;
}
.stringA{
color: green;
padding-right: 5px;
}
I also tried adjusting the width of the containers (e.g., using max-width / min-width / fit-content), but it prevents the inline state from occurring.
I also tried using display inline / inline block, but they cause the borders to split up into two when the screen width becomes small:
https://jsfiddle.net/Dirst/hfexz7od/51/
<div class="entire">
<div class="stringA">First string of text.</div>
<div class="stringB">Second string of text.</div>
</div>
.entire{
/*border: 1px solid black;*/
border-style: solid;
display: inline;
}
.stringA{
display: inline-block;
padding-right: 5px;
/*width: fit-content;*/
}
.stringB{
display: inline-block;
/*width: fit-content;*/
padding-right: 5px;
}
I would like to only have the border wrap around both strings as one rectangle but without the right-padding caused by the wrap.
You should use span instead of div for display: inline-block;
Here is the full of implementation
.entire {
border-style: solid;
display: inline-block;
}
.stringA {
color: green;
padding-right: 5px;
}
<div class="entire">
<span class="stringA">First string of text.</span>
<span> Second string of text.</span>
</div>
You can try it out in this sanbox https://jsfiddle.net/tmj7eab6/
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Keep the middle item centered when side items have different widths
(12 answers)
Closed 4 years ago.
What I want as a result:
I have three elements in a container that is a display: flex I want the left item to be aligned to the left, and the right item to the right. With the center item aligned in the center.
space-between is not the fix. It is not the solution I am looking for. This is because the elements are differing widths. Even with differing widths, I still want the middle element to be centered.
This could be fixed with a wrapper. and then put a flex: 1 on the wrappers, then within those wrappers, have the elements themselves. Again, this is not the fix I am looking for. I cannot use wrappers in my situation.
.parentContainer {
display: flex;
justify-content: center;
align-items: center;
}
.parentContainer > *{
background: red;
text-align: center;
}
<div class="parentContainer">
<div class="left">small</div>
<div class="middle">medium element here</div>
<div class="right">longer element is here too</div>
</div>
The primary way to achieve this layout – because it's clean and valid – is with flex: 1 on the items. That method is explained in the following post, but is also ruled out in this question.
Keep the middle item centered when side items have different widths
An alternative method involves CSS absolute positioning:
.parentContainer {
display: flex;
justify-content: space-between;
position: relative;
}
.middle {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* non-essential decorative styles */
.parentContainer > * { background: orange; text-align: center; padding: 5px; }
p { text-align: center;}
p > span { background-color: aqua; padding: 5px; }
P > span:first-child { font-size: 1.5em; }
<div class="parentContainer">
<div class="left">small</div>
<div class="middle">medium element here</div>
<div class="right">longer element is here too</div>
</div>
<p>
<span>↑</span><br>
<span>true center</span>
</p>
This method is explained in the following posts:
Methods for Aligning Flex Items along the Main Axis (see Box #71)
Element will not stay centered, especially when re-sizing screen
I think you can use a different approach. This is my suggestion.
.parentContainer {
display: table;
width: 100%;
background: lightblue;
border-collapse: collapse;
}
.parentContainer > div {
display: table-cell;
width: 33%;
}
.parentContainer > div:nth-child(1) {
text-align: left;
}
.parentContainer > div:nth-child(2) {
text-align: center;
}
.parentContainer > div:nth-child(3) {
text-align: right;
}
<div class="parentContainer">
<div>small</div>
<div>medium element here</div>
<div>longer element is here too</div>
</div>
Question
There is an inline container with 2 vertically stacked children. Pictured below:
The top green child should shrink it's width to the width of the bottom orange child, wrapping the text inside itself. The desired layout pictured below:
Question: How can it be done with CSS alone?
Other cases
Orange container wider than the green one (picture below). Green stays at it's natural maximum width. Note that even if the solution woulds stretch the green box to 100%, implementing the target solution would be easy by adding an extra container for the green box and then centering the green box inside it.
Orange box wider than the maxium possible width of the parent (picture below). Orange should start wrapping.
Notes
The content of the children is dynamic - the solution needs to work with children of variable width.
The parent is inline - it's width is not 100%, but rather the width of it's widest child.
Browser support is of no importance. Solutions can use even CSS Grid.
Code
Fiddle
http://jsfiddle.net/twfky2cr/24/
HTML
<div class="container">
<div class="fitChild">
Some long text that I would like to wrap to fit the container size
set by the orange box
</div>
<div class="fullWidthChild">
This one should set the container size
</div>
</div>
CSS
.container {
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
background-color: black;
}
.container,
.fitChild,
.fullWidthChild {
padding: 10px;
}
.fitChild {
color: white;
background-color: green;;
}
.fullWidthChild {
margin-top: 10px;
background-color: orange;
}
I have a partial solution for You.
http://jsfiddle.net/twfky2cr/166/
I'm using display: table and width:1px for cells.
<div class="table">
<div class="row">
<span class="cell wrap">
Some long text that I would like to wrap to fit the container size
</span>
</div>
<div class="row">
<span class="cell nowrap">
This one should set the container size
</span>
</div>
</div>
.table {
background-color: Black;
display: table;
padding: 1rem;
}
.row {
display: table-row;
}
.cell {
padding: 1rem;
display: table-cell;
width: 1px;
}
.wrap {
color: white;
background-color: Green;
white-space: wrap;
}
.nowrap {
background-color: Orange;
white-space: nowrap;
}
Checkout this fiddle here http://jsfiddle.net/kjr9aghp/
$(document).ready(function() {
$('.fitChild').width($('.fullWidthChild').width());
});
.container {
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
background-color: black;
}
.container,
.fitChild,
.fullWidthChild {
padding: 10px;
width: 100% !important;
}
.mainwrapper{
max-width:50%;
}
.fitChild {
color: white;
background-color: green;;
}
.fullWidthChild {
margin-top: 10px;
background-color: orange;
}
<div class="container">
<div class="mainwrapper">
<div class="fitChild">
Some long text that I would like to wrap to fit
the container size set by the orange box
</div>
<div class="fullWidthChild">
This one should set the container size
</div>
</div>
</div>
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Make a div span two rows in a grid
(2 answers)
Closed 5 years ago.
I'm trying to float two elements at the right of a "figure" element using flex but it end up floating just div1 at the right of figure and div2 is moved bellow, if I make div1 and div2 narrow enough, they are floated inline at the right of figure.
This is the CSS:
.container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
Desired Result:
Actual Result:
How it works?
First, you make a flex-container (flexc in this case) and apply the display:flex property on it which aligns the elements by default in row alignment. If you want an element to preserve its dimensions set it to flex:0 0 auto; else you can make use of flex:1; which shrinks or grows as the browser is resized.
Then to align the contents in column (div1 and div2) you can just wrap then in a different container and since div isn't an inline container, and the flex property doesn't have any effect on any other than the direct children of the flex parent, they are aligned in seperate lines.
.flexc {
display: flex;
justify-content: flex-start;
}
#fig {
flex: 0 0 auto;
width: 200px;
height: 200px;
background: gray;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d1,
#d2 {
width: 200px;
height: 50px;
background: purple;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
<div class="flexc">
<div id="fig">Figure</div>
<div class="col">
<div id="d1">div1</div>
<div id="d2">div2</div>
</div>
</div>
Without altering the html:
.flexc {
display: flex;
flex-direction:column;
position:relative;
}
#fig {
flex: 0 0 auto;
width: 200px;
height: 200px;
background: gray;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d1,
#d2 {
position:absolute;
left:250px;
width: 200px;
height: 50px;
background: purple;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d2{
top:70px;
}
<div class="flexc">
<div id="fig">Figure</div>
<div id="d1">div1</div>
<div id="d2">div2</div>
</div>
Not sure what your HTML looks like, but display: flex is best used on the container wrapping all the elements you want aligned. Imagine it to be the largest box that you put smaller boxes inside.
Codepen example demonstrating this: https://codepen.io/corviday/pen/VyYdar
Following this hierarchy with .container as your largest box, since you want two columns, you can divide it further into two smaller boxes (.left in red and .right in blue in this case).
From there you would need to group div1/div2 together to float the way you'd like, and would be the items that fill the box .right.
You can use Bootstrap to resolve or put div1 and div2 in one div main to drop div main
Bootstrap exemple
<div class='container'>
<div class="col-md-12">
<div class="col-md-6">
1 text
</div>
<div class="col-md-6">
<div class="col-md-6">
2 text
</div>
<div class="col-md-6">
3 text
</div>
</div>
</div>
</div>
I think the best layout engine to use for your use case is hinted at in your description of the problem: Floats.
Here is a solution that doesn't require you to alter your html.
<div class="container">
<div class="medium-box">figure</div>
<div class="small-box">div 1</div>
<div class="small-box">div 2</div>
</div>
.container{
width: 500px;
}
.medium-box {
height: 200px;
width: 200px;
margin: 10px;
background: grey;
float:left
}
.small-box {
float:left;
height: 30px;
width: 200px;
background: blue;
margin: 10px;
}
https://codepen.io/stacyvlasits/pen/aVPZbY
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 8 years ago.
Any idea how I can vertically center text which can have one or two lines? More over, the text has it's line-height set. I've tried the following but it didn't work:
<div>
<span>some text here</span>
</div>
<div>
<span>some</span>
</div>
div {
border: 1px solid;
width: 70px;
height: 50px;
line-height: 50px;
}
span {
display: inline-block;
line-height: 14px;
}
You can always use display: table-cell trick with vertical-align: middle:
div {
border: 1px solid;
width: 70px;
height: 50px;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
}
<div> <span>some text here</span>
</div>
<div> <span>some</span>
</div>