This question already has answers here:
Add centered text to the middle of a horizontal rule [duplicate]
(33 answers)
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 2 years ago.
I was wondering how can I implement this image with CSS(3) (and if necessary with javascript).
Any ideas?
There are numerous ways of doing this- but since your lines are more than 1 pixel in height and has rounded ends on both ends of both lines - I would di it as ::before and ::after pseudo-elements with the centered text.
Note that when positioning elements with position:absolute - you will need to apply position: relative to a parent element. Aslo - you will need to offset the line pseudoelements by half their height - in order to vertically center them.
.wrapper {
text-align: center;
position: relative;
}
span {
display: inline-block;
width: 10%;
font-size: 20px;
font-weight: bold
}
.wrapper::before,
.wrapper::after {
content: ' ';
display: block;
position: absolute;
top: calc(50% - 3px);
width: 45%;
background: black;
border-radius: 6px;
height: 6px;
}
.wrapper::after {
right: 0;
}
<div class="wrapper">
<span>Hi!</span>
</div>
Related
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 1 year ago.
I am trying to make an order book widget. I am imitating this example on codesandbox where it has a span in td with position: relative and a percent div with its 'positionset toabsolute` and then it dynamically setting the width accordingly.
the code is like this
td span {
position: relative;
z-index: 2;
}
table.Asks .percent {
background-color: #fae9f1;
z-index: 0;
}
table.Bids .percent {
background-color: #f1f9e8;
}
td .percent {
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
So I was trying to do the same. Here is a live demo of what I did. The problem is it seems that all of the bars appear vertically instead of horizontally. I cannot figure out what went wrong there.
Your td is missing position: relative; so the absolute positioned element is not positioned relative to it
table .price {
position: relative;
color: red;
}
sandbox: https://codesandbox.io/s/recursing-keldysh-wj3jd?file=/src/styles.css
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I would like to center both horizontally and vertically a <p></p> that could consist of one or more lines, in a <div></div>. Only the parent's width and height are known. Note: I refer to the div as parent, and the p as child.
I've seen here and on other sites, that in order to do vertical centering, the best way would be by using display: table on the parent element and display: table-cell combined with vertical-align: middle on the child.
However, I need the div's style.top and style.left to be overwritten later by some javascript, to make it move. By using the table trick, it somehow prevents me from moving the parent, at least this way. Note that the child must stay centered when the div moves.
TL;DR:
How to center text in a div, and then still be able to move the div?
My html's body:
<div id="target">
<p>Centered?</p>
</div>
My CSS
div {
outline: 1px solid white;
background-color: #FF9F00;
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
/* how to center its child? */
}
p {
font-family: Arial;
}
My javascript way of moving:
var target = document.getElementById("target");
target.addEventListener('mousemove', function (event) {
target.style.left = event.x + "px";
target.style.top = event.y + "px";
});
How about use flexbox?
div {
display:flex;
flex-direction:column;
justify-content: center;
text-align:center;
}
<div><p>I want this paragraph to be at the center, but it's not.</p></div>
It works if parent <div> is display: table-cell:
div {
width: 300px;
height: 150px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
p {
border: 1px solid green;;
display: inline-block;
}
<div>
<p>lorem ipsum bla bla blah</p>
</div>
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 3 years ago.
I will try to make my question more clear.
Because I used below setting on Html body, I need to scroll the page down to get to page bottom.
body { height: 180vh;}
And I want to set a div position top property relative to document height, so that I can control its position at a place only visible when I scroll down. I prefer to set it by percentage value so that code will adapt different sizes of devices.
But by default the top property is relative to viewport, so I can not realize it by setting top value.
Is there a way to realize what I want to do? even not by top property.
If you give the body a position: relative and the div a position: absolute, you can set the top property as a percentage, where top: 100% will position it at the bottom of the page:
body {
height: 180vh;
background: lightblue;
position: relative;
}
div{
height: 30px;
width: 140px;
border: solid 2px gray;
background: white;
position: absolute;
top: 100%;
}
<div></div>
If i understand your question correctly, there are 2 ways
use padding-top
use position:absolute and top
code snippet below:
body {
height: 180vh;
}
.myDiv1 {
margin-top: 110vh;
height: 100px;
width: 100%;
background: lightblue;
}
.myDiv2 {
position: absolute;
top: 150vh;
height: 100px;
width: 98%;
background: lightpink;
}
<body>
<div class='myDiv1'></div>
<div class='myDiv2'></div>
</body>
First you need to make sure that the position property of the body is relative, absolute or fixed.
You can then set the position: absolute to make the element be dependent on the last parent element that had one of three properties mentioned above.
Finally you can set your top, left, right and bottom properties after that.
body {
height: 180vh;
position: relative;
}
#down {
position: absolute;
// or bottom: 10%;
bottom: 25px;
}
<div id="down">Here</div>
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Closed 4 years ago.
In my html pug definition I have following divs:
div(id='wrapper')
div(id='editor' class='editor')
where 2nd one contains ace editor. If wrapper (container) div has fixed height ace editor displays fine:
#wrapper {
width: 80%;
height: 640px;
margin-left: 10%;
margin-right: 10%;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
}
div.editor {
width: 100%;
height: 60%;
}
But if I want to make #wrapper with dynamic height as well:
height: 90%;
ace editor collapses into 1px height. What is the problem here, how to solve?
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
I'm trying to make page with normal div #header and scrollable div #content, so my #content fill all the height left from the #header, even if #header changes his own height.
I tried several options and that is this is my last one http://jsfiddle.net/C4wEg/. But the flaw of this option is that I need to change top property of #content (utilize JavaScript) if height of the #header changes.
Is there any solution to achive my goals only with css?
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
position: relative;
}
#header {
background-color: tan;
}
#content {
overflow: auto;
background-color: teal;
position: absolute;
bottom: 0;
top: 20px;
}
<div id="header">
Test header
</div>
<div id="content">
Test content
</div>
Since css ignores the dimensions of absolute/fixed objects (those are out-of-flow as far as their neighbours are concerned), you can use media queries to emulate dynamic height behaviour:
#media only screen and ( max-width: 700px ) {
#header {
height: 40px;
}
#content {
padding-top: 40px;
}
}
http://jsfiddle.net/2RTFW/ (resize the width of display area to see the effect).
If you are using SASS, then you can easily generate such media queries, even in 10px increments, if you wish (use "for" loop).