I'm trying to make a link stick to the bottom center of a div and have it be centered.
So far I've come up with this:
http://jsfiddle.net/r494Lx0r/2/
div.container {
position: relative;
height: 110px;
width: 120px;
border: dashed 1px red;
}
div.container div.text {
position: absolute;
bottom: 0px;
border: solid 1px black;
}
Now how do I make it so that it's centered? I've tried adding text-align:center; and margin:0 auto; to the container but neither of those do anything.
Does anyone know how to do this?
UPDATE add text-algin: center to the parent to center the anchor and set border: solid 1px black; to your anchor:
div.container {
position: relative;
height: 110px;
width: 120px;
border: dashed 1px red;
}
div.container div.text {
position: absolute;
bottom: 0px;
right: 0;
left: 0;
text-align: center;
}
a{border: solid 1px black;}
<div class="container">
<div class="text">
Google.com
</div>
</div>
Add Width: 100% and text-align: center
div.container {
position: relative;
height: 110px;
width: 120px;
border: dashed 1px red;
}
div.container div.text {
position: absolute;
bottom: 0px;
text-align: center;
width:100%;
border: solid 1px black;
}
<div class="container">
<div class="text">
Google.com
</div>
</div>
or left: 0;, right: 0; and text-align: center;
div.container {
position: relative;
height: 110px;
width: 120px;
border: dashed 1px red;
}
div.container div.text {
position: absolute;
bottom: 0px;
left: 0;
right: 0;
text-align: center;
border: solid 1px black;
}
<div class="container">
<div class="text">
Google.com
</div>
</div>
or you can combine `margin-left: 50%;` and `transform: translate(-50%)`
div.container {
position: relative;
height: 110px;
width: 120px;
border: dashed 1px red
}
div.container div.text {
position: absolute;
bottom: 0px;
border: solid 1px black;
margin-left: 50%;
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
transform: translate(-50%)
}
<div class="container">
<div class="text">
Google.com
</div>
</div>
display:block;
margin:auto;
makes elements centered. So you could edit your code to become:
div.container div.text {
bottom: 0px;
border: solid 1px black;
display:block;
margin:auto;
}
.text{ width: 100%; text-align: auto; }
The text wrapping div will then be as wide as its container, so text align will work as expected. The reason text-align isn't working for you on your current code is because the "text" div is only as wide as the link, therefore centering its contents does nothing.
PROVIDED the link is the bottom/last element in the div-
add this to the div:
text-align: center; //centers the text
and then set the link to:
margin-top: auto; // pushes the text down to the bottom
worked in my case.
Simple and quick, but only works provided your link is the last element in the div.
Related
I would like to center a circle on a line, like this:
I've got the following code:
.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
left: 76%;
top: 41px;
background-color: #000;
}
.box {
width:500px;
height:150px;
position: relative;
border: 1px solid #eee;
.left {
width:200px;
height:100%;
position:relative;
}
<div class="Box">
<div class="Left">
<div class="circle">
</div>
</div>
<div class="Right"></div>
</div>
However, when i resize the windows, it ends up like this:
How can i make sure the circle stays in place, even when i resize my window?
You could take a different approach and use the border-right property on the .left div to represent the vertical line behind the .circle:
.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
right: -37.5px; /* modified / - half of the circle's width */
top: 41px;
background-color: #000;
}
.box {
width: 500px;
max-width: 100%; /* added / responsive */
height: 150px;
position: relative;
border: 1px solid #eee;
}
.left {
width: 200px;
max-width: 100%; /* added / responsive */
height: 100%;
position: relative;
border-right: 1px solid #eee; /* added */
}
<div class="box">
<div class="left">
<div class="circle">
</div>
</div>
<div class="right"></div>
</div>
Another simply way to do this is using pseudo element like this :
.box {
margin: 10px auto;
max-width: 400px;
border: 1px solid #000;
text-align: center;
position: relative;
}
.box:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
margin-left: -0.5px;
background: #000;
}
.cirle {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
background: #000;
margin: 20px 0;
}
<div class="box">
<div class="cirle"></div>
</div>
this part of the code will make sure the line will stay at the center:
.box:before {
left: 50%;
margin-left: -0.5px;
}
I have this code:
<div style="position:absolute;left:0px;top:0px;width:17px;height:395px;background-color:white;border:1px solid black;">
<div style="position:inherit;;width:inherit;height:inherit;overflow:scroll;"></div>
<button style="position:absolute;left:0px;top:139px;width:17px;height:73px;background-color:white;border:1px solid black;"></button>
</div>
If you look at the generated HTML, you will see that there is a white square that is not filled by the scrollbar on the bottom. How does this happen? When I inspect the element, the overflow:scroll div does not have 395px, but 378px. When I correct it to 395px the scrollbar will fill the parent div visually, but there will be an overflow.
What is happening here?
This is simply the space for the horizontal scrollbar. You can make it visible by increasing your elements width:
.bar {
position: absolute;
left: 0px;
top: 0px;
width: 80px;
height: 395px;
background-color: white;
border: 1px solid black;
}
.inner {
position: inherit;
width: inherit;
height: inherit;
overflow: scroll;
}
button {
position: absolute;
left: 0px;
top: 139px;
width: 17px;
height: 73px;
background-color: white;
border: 1px solid black;
}
<div class="bar">
<div class="inner"></div>
<button></button>
</div>
You can avoid that space by using overflow-y instead of the more general overflow:
.bar {
position: absolute;
left: 0px;
top: 0px;
width: 17px;
height: 395px;
background-color: white;
border: 1px solid black;
}
.inner {
position: inherit;
width: inherit;
height: inherit;
overflow-y: scroll;
}
button {
position: absolute;
left: 0px;
top: 139px;
width: 17px;
height: 73px;
background-color: white;
border: 1px solid black;
}
<div class="bar">
<div class="inner"></div>
<button></button>
</div>
In general it's a good idea to seperate styles from markup. It's easier to avoid problems if not using inline styles.
So, I'm trying to achieve this result:
This is what I got when I tried: https://jsfiddle.net/wvdkmjge/
.container {
width: 100px;
height: 1px;
background-color: black;
}
.circle {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
background-color: transparent;
border: solid 1px black;
border-radius: 50%;
}
<div class="container">
<div class="circle">
</div>
</div>
Moreover, I want that I'll not see the border line on the circle. Any suggestions?
A small amendment to your code to position the elements and you get the effect you want to achieve.
.container {
width: 100px;
height: 1px;
background-color: black;
position: relative;
}
.circle {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
background-color: white;
border: solid 1px black;
border-radius: 50%;
position: absolute;
top: -6px;
left: calc(50% - 5px);
}
.blue {
margin-top: 20px;
background: #3EB2EF;
}
.blue .circle {
background: #3EB2EF;
border-color: #3EB2EF;
}
<div class="container">
<div class="circle">
</div>
</div>
<div class="container blue">
<div class="circle">
</div>
</div>
If you want to position an element depending on its parent, use position:relative for the parent and then add position relative or absolute to the child. to center something in the middle, use margin:0 auto and if it has absolute positioning also add left:0; right:0;
https://jsfiddle.net/azizn/e4ev3awj/1/
.container {
width: 100px;
height: 1px;
background-color: blue;
position:relative;
}
.circle {
display:inline-block;
width: 10px;
height: 10px;
position: absolute;
background:blue;
left:0;
right:0;
margin:0 auto;
border-radius: 100%;
top:-4px;
}
<div class="container">
<div class="circle">
</div>
</div>
a bit late to answer, but this looks like a typical <hr/> that needs some makup.
/* restyle however your needs are hr and its pseudo elements , here only one is used */
hr {
color: turquoise;
border-width: 3px;
margin: 1em;
box-shadow: 0 0 5px gray;
}
hr:before {
content: '';
border-radius: 100%;
position: absolute;
height: 20px;
width: 20px;
background: turquoise;
left: 50%;
margin: -10px;
box-shadow: inherit
}
<hr/>
Try this:
.container {
width: 100px;
height: 1px;
background-color: black;
position: relative;
}
.circle {
position: absolute;
top: -5px;
left: 50%;
margin-left: -5px;
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
background-color: transparent;
border: solid 1px black;
border-radius: 50%;
}
<div class="container">
<div class="circle">
</div>
</div>
Fiddle
This uses a lot of different codes then above.
class:before and class:after
Hope this helps you!
I want the border div to be "hidden" behind the circle and not cross through it. I thought z-index was the way to do things like this.
Any ideas?
JSFIDDLE: http://jsfiddle.net/qs5xmege/1/
CSS and HTML
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Give .circle a position:relative, z-index works only with position:relative, position:absolute or position: fixed
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
position: relative;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Add position:relative; to .circle.
z-index need relative, absolute or fixed vaue for position.
Set position:relative of div circle and z-index:2 ie. 1 more than border is enough
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
Snippet
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Try like this:
.circle {
background-color: #fff;
border: 3px solid red;
border-radius: 11px;
display: block;
height: 22px;
margin: 0 auto;
position: relative;
top: -68px;
width: 22px;
}
.border {
border-right: thin solid black;
height: 100px;
width: 50%;
}
How could I center the blue box inside the red one ?
I see that the left side of the blue box is exactly in the middle of the red box, but I would like to center the whole blue box, not its left side. The dimensions of the boxes are not constant. I want to align regardless of boxes dimensions. Example to play with here. Thanks !
HTML:
<div id="rel">
<span id="abs">Why I'm not centered ?</span>
</div>
CSS:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}
If you're able to change the <span> tag to a <div>
<div id="rel">
<div id="abs">Why I'm not centered ?</div>
</div>
Then this piece of CSS should work.
#rel {
position: absolute;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center; }
#abs {
width: 300px;
height: 200px;
border: 1px solid blue;
margin: auto;
margin-top: 50px; }
I think it's better to use more automation for the enclosed box as less changes would be needed should you change the size of the container box.
You could add left:50px to #abs if that's all you want...
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
left:50px;
}
If you are going to define dimensions like that (200px x 300px and 300px x 400px), here's how it can be centered:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 49px 0 0 49px;
}
You can check at my solution here at http://jsfiddle.net/NN68Z/96/
I did the following to the css
#rel {
position: relative;
top: 10px;
left: 20px;
right: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#abs {
display: block;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
}
This should work
#abs {
position: absolute;
left: auto;
right: auto;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}