This question already has answers here:
Line before and after title over image [duplicate]
(2 answers)
Closed 8 years ago.
Okay, i am not allowed to upload an image yet, so i will try to explain it this way:
I am trying to create this effect:
(update: text replaced with an image)
= : background div with background-image
the dashed line has a width of 100% and does not cross the name.
I don't want the line to go over the name, so
i am looking for some kind of mask that i can place
over the line.
Thanks in advance!
You could add the line with ::before and ::after pseudo-elements, styled with a border:
#wrapper {
display: flex;
border: 3px double;
/* You can add a backgound here */
}
#wrapper::before, #wrapper::after {
content: '';
flex-grow: 1;
border-top: 1px dashed;
align-self: center;
}
<div id="wrapper">
<div>Peter</div>
</div>
You can do this with flexbox.
Here is an example on codepen
.wrapper {
width: 400px;
display: flex;
flex-direction: row;
background: lightgray;
}
.wrapper div {
flex-grow: 1;
}
.line {
height: 1px;
background: black;
flex-grow: 1;
position: relative;
top: 7px;
}
<div class="wrapper">
<div class="line"></div>
<span>hello</span>
<div class="line"></div>
</div>
Try z-index in the css.
Let the upper layer get the larger number.
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 1 year ago.
I want to accomplish something like the image, but without the third element, having one element fixed on the left and another in the center.
Is there an easier way without flexbox?
<div style="display: flex; justify-content: space-between">
<button>Left Header</button>
<button>middle</button>
</div>
Im sure there is a better way, but how about just hiding last column?
.container {
display: flex;
justify-content: space-between;
}
.item {
/* no important; just to visualize*/
width: 50px;
height: 50px;
background-color: blue;
border: 1px solid;
}
.item.last { /* :last-child doesn't work */
visibility: hidden;
background-color: red;
}
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item last">C</div>
<div>
You can use postion for first div and margin for the second div, like this
.container {
postion: relative;
}
.item {
width: 50px;
height: 50px;
background-color: teal;
border: 1px solid grey;
}
.item.one {
position: absolute;
}
.item.two {
margin: auto
}
<div class="container">
<div class="item one">A</div>
<div class="item two">B</div>
<div>
you can follow this code
<div style="display: flex; justify-content: space-between">
<button>Left Header</button>
<button style="margin-right: auto; margin-left: auto">middle</button>
</div>
You can just use flexbox "self-align".
Just check it here.
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 2 years ago.
I have a parent div with two child divs. The 2nd child is set to flex-grow. This works great, unless text has wrapped within the first column. In this case, it leaves a big empty space. Why is that, and can it be fixed?
This is the result I would Expect:
This is what is actually happening:
body {
font-family: sans-serif;
}
.parent {
display: flex;
max-width: 225px;
border: 1px solid green;
padding: 3px;
}
.parent > div {
border: 1px solid red;
pading: 3px;
padding: 2px;
}
.child2 {
flex-grow: 1;
display: flex;
align-items: center;
}
<div class="parent">
<div class="child1">
Short
</div>
<div class="child2">
+
</div>
</div>
<div class="parent">
<div class="child1">
Long NamedItem Thingamagig AnotherBigLong WordHere1234
</div>
<div class="child2">
+
</div>
</div>
<br>
Why is this space here ↑
Because you have a long string.
Add word-break: break-all to .parent > div and you'll understand what is happening.
You'll want to tweak .child1 with :
flex-grow: 0;
flex-shrink: 0;
flex-basis: 0;
or maybe
flex-grow: 0;
flex-shrink: 0;
flex-basis: 80%;
(I put this syntax because it works better with IE)
This question already has answers here:
Horizontal line between two words
(3 answers)
Closed 2 years ago.
I'm trying to add a horizontal line in the middle of two words. For example:
First word ----------------------------------- Second word
Is there a way to do that in CSS or flex?
I'm providing a solution using Flexbox because I didn't see one from the link in #Awais's comment above.
.container {
display: flex;
justify-content: space-between;
}
.container .middle {
margin: 0 5px;
transform: translateY(-50%);
border-bottom: 1px dashed;
flex-grow: 1;
}
<div class="container">
<span>First word</span>
<span class="middle"></span>
<span>Second word</span>
</div>
jsFiddle
Pure CSS Flex solution with minimal line of code.
.container {
display: flex;
}
.middle {
flex-grow: 1;
align-self: center;
}
.dash {
border-bottom: 1px dashed #aaa;
}
<div class="container">
<div>First word</div>
<div class="middle">
<div class="dash"></div>
</div>
<div>Second word</div>
</div>
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 an answer here:
ie10 and flexboxes? (nightmare)
(1 answer)
Closed 5 years ago.
I've a problem with the IE10 and flexbox. At the moment I use code like the snippet below.
The content of col 2 has got a variable length (with multiple small elements) and it should take the width it needs. I want to have to rows with a line between them. Therefor I added an pseudo-element, put it on the correct position via order with a width of 100%.
Chrome, Firefox, etc. can render this example, but if I run it with IE10, the pseudo-element disappears and the content of the second row moves itself to the first row.
Isn't the IE10 able to render pseudo-elements together with flexbox? Do you know a 'hack' to force this break?
/* Container */
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 200px;
}
.container:after {
background-color: #000;
content: '';
height: 2px;
margin: 5px 0;
order: 3;
width: 100%;
}
/* Child */
.child {
width: 100px;
border: 1px solid red;
box-sizing: border-box;
height: 50px;
line-height: 50px;
text-align: center;
}
/* Positioning of the childs */
.c1 {
order: 1
}
.c2 {
order: 2
}
.c3 {
order: 4
}
.c4 {
order: 5
}
<div class="container">
<div class="child c1">row 1 col 1</div>
<div class="child c2">row 1 col 2</div>
<div class="child c3">row 2 col 1</div>
<div class="child c4">row 2 col 2</div>
</div>
You need to add this styles for .container to work in IE10:
display: -ms-flexbox;
-ms-flex-wrap: wrap;