Given a horizontal offset (z), I want to horizontally move variable-width div by it's midpoint to that offset, rather than it's leftmost or rightmost edge.
Since it's variable-width, I cannot simply use half of a fixed-width value to calculate an offset to get the midpoint of the div to (z)
also, the div is absolutely positioned, so it does not take the full width by default
an incorrect example is here:
http://jsbin.com/rejaduxepe/edit?html,css,output
.bar {
width: 80%;
position: absolute;
top: 0;
height: 25px;
border-radius: 2px;
border: solid 1px #F09;
}
.value {
position: absolute;
height: 19px;
line-height: 18px;
border-radius: 2px;
top: 2px;
background-color: #0F9;
border: solid 1px #F90;
color: #000;
left: 20%;
}
<div class="bar">
<div class="value">123v452</div>
</div>
I do not simply want to center the div value in the center of bar.
I want the "midpoint" of the value div to be 20% from the start of bar, but I don't know how wide the value div is.
The code above puts the "leftmost" portion of value to be 20% from the start of bar, instead of the "midpoint" of value to be 20% from the start of bar
You can use absolute positioning and translate the elements with or you can use flex on the parent element.
div{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
or
.divWrapper{
display: flex;
justify-content: center;
}
Just add transform: translateX(-50%) which will move it left by half of its width:
.bar {
width: 80%;
position: absolute;
top: 0;
height: 25px;
border-radius: 2px;
border: solid 1px #F09;
}
.value {
position: absolute;
height: 19px;
line-height: 18px;
border-radius: 2px;
top: 2px;
transform: translateX(-50%);
background-color: #0F9;
border: solid 1px #F90;
color: #000;
left: 20%;
}
span {
position: absolute;
top: 30px;
width: 20%;
border-top: 2px solid red;
}
<div class="bar">
<div class="value">123v452</div>
<span></span>
</div>
Related
So, I'm trying to make a top right corner ribbon. I'm doing this successfuly but the issue that I have is that I cannot find a way to make the top right corner to have a slight border-radius of lets say 10px. I tried border-radius: 0px 0px 0px 10px (changing all the values) and as well as border-top-right-radius:10px and none of those worked. Any solution will be appreciated.
.corner-ribbon {
position: absolute;
top: 0px;
right: 0px;
width: 0;
height: 0;
border-top: 100px solid #ED5565;
border-left: 100px solid transparent;
}
.corner-ribbon .test-text {
transform: rotate(45deg);
position: absolute;
right: 10px;
bottom: 60px;
color: white;
text-transform: uppercase;
}
<div class="corner-ribbon">
<span class="test-text">Some text</span>
</div>
Based on the given code, you can add a wrapper and make it the same size as your ribbon, then apply your border radius with overflow hidden. Since you are making the shape with borders so applying border radius on your existing elements would not work.
.corner-ribbon {
border-top: 100px solid #ED5565;
border-left: 100px solid transparent;
}
.corner-ribbon .test-text {
transform: rotate(45deg);
position: absolute;
right: 10px;
bottom: 60px;
color: white;
text-transform: uppercase;
}
.wrapper {
border-radius: 0 15px 0 0;
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
overflow: hidden;
}
<div class="wrapper">
<div class="corner-ribbon">
<span class="test-text">Some text</span>
</div>
</div>
I want to add an increasing amount of text using Javascript into a div.
When I change the the text inside the div in the html, it is responsive, but it responds by increasing the width in both directions rather than only pushing the text to the left, which is the desired behavior.
I have thought about using float, but as there are no elements to the left or right of this div, I'm not sure it would make sense in this situation.
Here is the link to my codepen: http://codepen.io/sentedelviento/pen/bZzPrO?editors=1100
html:
<body>
<div id='parent'>
<div id='test'>Will remain centered no matter</div>
</div>
</body>
css:
#parent {
width: auto; height: 10%;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
position: absolute;
border: 2px solid blue;
}
#test {
width: auto; height: auto;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
position: relative;
border: 2px solid black;
}
Check this:
http://codepen.io/anon/pen/bZzXPw?editors=1100
#test {
max-width: 80%; height: 80%;
margin-top: 1%;
float: right;
border: 2px solid black;
margin-right: 10%;
}
You could also use absolute position but must remember to align to right:
#test {
max-width: 80%; height: 80%;
margin-top: 1%;
border: 2px solid black;
margin-right: 10%;
position:absolute;
right: 0%;
}
div {
width: 300px;
height: 300px;
border:1px solid black;
}
h1 {
width: 300px;
transform: rotate(-90deg)
}
<div>
<h1>Hola</h1>
</div>
If you try this snippet, you will see that the h1 is rotated and placed in the center of the div (makes sense, they have same width)
But how to align it to the left? (flexible container's width)
You can position the h1 element absolutely with respect to the parent div and then use transform-origin property to specify the axis about which the rotation should happen.
In the below snippet, the element is positioned at the bottom of the parent and because the origin is set at left-bottom, the left-bottom of the element (h1) stays at its position during rotation.
Now because of the rotation, the element would go outside of the parent after rotation. To bring it back into position add translateY(100%) to the transform stack. A text-align: right is added to set the content at left-top. The text-align makes it look a bit more hackish than it actually is but otherwise it is difficult to position at left-top.
div {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
}
h1 {
position: absolute;
display: inline-block;
bottom: 0px;
width: 300px;
text-align: right;
transform: rotate(-90deg) translateY(100%);
border: 1px solid;
transform-origin: left bottom;
}
div, h1 {
margin: 0px;
padding: 0px;
}
<div>
<h1>Hola</h1>
</div>
Note to future visitors: Unlike using static values for positioning, this solution using translateY() would be able to adapt itself automatically even if the length of the content increases or spans multiple lines like in the below snippet. Again, the only drawback would be that the text would be right aligned.
div {
position: relative;
display: inline-block;
width: 250px;
height: 250px;
border: 1px solid black;
}
h1 {
position: absolute;
display: inline-block;
bottom: 0px;
width: 250px;
text-align: right;
transform: rotate(-90deg) translateY(100%);
border: 1px solid;
transform-origin: left bottom;
}
div,
h1 {
margin: 0px;
padding: 0px;
}
<div>
<h1>Halooo</h1>
</div>
<div>
<h1>Some lengthy content which wraps around</h1>
</div>
check this out it will give a direction to your required solution..
div {
width: 300px;
height: 300px;
border: 1px solid black;
}
h1 {
width: 70px;
margin-left: -20px;
float: left;
transform: rotate(-90deg)
}
<div>
<h1>Hola</h1>
</div>
Updated
Or you can do in this way also
div {
width: 300px;
height: 300px;
border: 1px solid black;
}
h1 {
position: absolute;
left: -10px;
top: 2px;
transform: rotate(-90deg)
}
<div>
<h1>Hola</h1>
</div>
I have to put "Play" icon and text "Play" in the center of element that contains and its height and width depend of that image - they are changing depending of the user's screen.
I was trying to use it like this
a.thumbnail:hover:after
{
content: "Play";
width: 50px;
height: 20px;
display: inline-block;
position: absolute;
top:50%;
left: 50%;
background-color: #fff;
border: 1px solid red;
}
But actually the top left corner of the :before element is in the middle and looks displaced... can you suggest me better solution?
add this to the code
margin: -10px -25px; /** height/2 width/2 **/
or use translate the same way
div{
position: relative;
width: 200px;
height: 200px;
background: red;
margin: 20px auto
}
div:after{
content: '';
position: absolute;
width: 50px;
height: 20px;
z-index: 2;
top: 50%;
left: 50%;
background: green;
transform: translate( -50%, -50%)
}
<div><div/>
I'm trying to fill an element with multiple colors using CSS. Currently, I have this CSS:
div.container {
width: 100px;
border: 1px dotted;
font-size: 10px;
}
.box {
box-sizing:border-box;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 6px solid #99FF99;
border-bottom-color: #FF9966;
border-right-color: #FF9966;
}
fiddle
Problem is that the contents are not over the border, so it looks like this:
How can I get the contents of span class="box" to stay in the middle of the element (i.e. over the colored circle)?
How about using absolute and relative positions, and making the circle as a pseudo element.
DEMO: http://jsfiddle.net/d0cv4bc8/8/
div.container {
width: 100px;
border: 1px dotted;
font-size: 12px;
}
.box {
position: relative;
}
.box::before {
content: "";
box-sizing:border-box;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 6px solid #99FF99;
border-bottom-color: #FF9966;
border-right-color: #FF9966;
position: absolute;
z-index: -1;
}
Only way I can get the contents centered vertically and horizontally is to put contents inside a span, moved left and up by half of box's border width.
http://jsfiddle.net/d0cv4bc8/11/
CSS
.box .contents {
display:inline-block;
position: relative;
left: -3px;
top: -3px;
}
HTML
<div class="container">
<span class="box"><span class="contents">1</span></span>
</div>