tried text-align center and margin auto, both doesn't work and I do not want to used to use the 'margin hack' for centering..
http://jsfiddle.net/st9AM/1/
.circle{
float: left;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
}
.inner{
float: left;
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #DDD;
}
First of all, using margin: auto; is not a hack
And to center your circle inside the circle, you can use positioning techniques, like position: absolute;. Here, I am using position: absolute; on the inner circle, than am assigning top and left properties with a value of 50% and than am using margin-top and margin-left and deducting 1/2 of the height and width.
Why am deducting 32px? As I already said am deducting exactly half the total width and height so this also includes the border of your element which is set to 2px which makes your element 64px in height and width respectively.
To vertical-align the + symbol, am using line-height property as I can only see a single character to be vertically aligned(you didn't said but technically I can assume what shape are you looking for), alternatively you can also use vertical-align: middle; but you need to set the container element to display: table-cell;
Demo
Last but not the least, you should nest the span tag inside the inner circle div.
.circle{
float: left;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
}
.inner{
text-align: center;
line-height: 60px;
position: absolute;
top: 50%;
margin-top: -31px;
left: 50%;
margin-left: -31px;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #DDD;
}
Here's a cleaner solution.
with one HTML element only.
HTML:
<div class='circle'></div>
CSS:
*
{
margin: 0;
padding: 0;
}
.circle, .circle:after
{
border-radius: 50%;
border: 2px solid #DDD;
text-align: center;
}
.circle
{
width: 120px;
height: 120px;
font-size: 0;
}
.circle:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.circle:after
{
content:'+';
font-size: 20px;
padding: 20px 0; /* 2*padding + font size = innerCircle height*/
display: inline-block;
vertical-align: middle;
width: 50%;
}
You had "float: left" in the inner circle, which you didn't need
//float: left;
Working fiddle
remove float left and use margin: 0 auto;
.circle{
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
margin:0 auto;
}
Have a look at this fiddle. You wrote float:left; and wanted to center the image. Remove the float:left; and it works fine.
Current browsers (May-22) work with this (replace 261px and 165x by 50% of your image size... mine is 522px x 330px ):
{
position:absolute;
left: calc( 50% - 261px );
top: calc( 50% - 165px );
}
Related
I can't seem to make an element move in CSS. It's a form with a background and it's centered. I can't see what I'm doing wrong.
#skyformbox {
width: 50%;
margin: 0 auto;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-
content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
<div align="left">
<div id="skyformbox">
[gravityform id="12" title="false" description="false"]
</div>
</div>
Why are you positioning 2000px left? As far as I know the "left" property will only work if the positioning is set to absolute...
Anyway try this:
#skyformbox {
width: 50%;
margin-left: 0px;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
Setting the margin-left to 0px did the trick for me (assuming that what you're trying to do here is to get the form to align to the left side of the page).
I'm trying to set the left border of siginimage to 40px, but since the height of the signinimage is 25px, the border height is also being set as 25px.
.top-header {
float: left;
border-left: 2px solid #CCCCCC;
height: 30px;
margin-top: 0px;
}
#signinimage {
padding-top: 6px;
padding-left: 10px;
height: 25px;
width: 25px;
}
<img src="images/signinimage.png" class="top-header" id="signinimage">
Two approaches.
Either create a container and put the image inside it
In your question, you said you wanted to extend the border to the left
(but I mean that's just a matter of simple float:, but you can apply
this approach in general
img {
width: 100px;
height: 100px;
float: right;
}
#container {
border: 3px solid black;
width: 150px;
height: 100px;
}
<div id ="container">
<img src=https://i.imgur.com/QIsNrpM.png/>
</div>
The other alternative, if you insist on using only one element instead of two, you can set the image as a background-image of a differently sized div
#imganddiv {
border: 3px solid black;
width: 150px;
height: 100px;
background-image: url('https://i.imgur.com/QIsNrpM.png');
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: right center;
}
<div id="imganddiv"></div>
I personally prefer the first option as it's a bit more intuitive and generally considered a common practice on to how containers (elements inside elements) should be handled.
To get a border taller than the image, you can wrap the image in a container, and apply the border to that container.
.top-header{
float: left;
border-left: 2px solid #CCCCCC;
height: 40px;
margin-top: 0px;
/* Center the image vertically */
display: flex;
align-items: center;
}
#signinimage{
height: 25px;
width: 25px;
padding-left: 10px;
}
<div class="top-header">
<img src="http://placekitten.com/25/25" id="signinimage">
</div>
I have an absolute positioned div inside an overflow: auto, as here:
There 5 row divs with position relative, and I have a .grayBlock inside the row 2 div.
As you can see, the gray block is cut off due to the overflow: auto.
I want it to escape the container. What can I do?
You can construct an additional canvasInfo__block around the current one. It should be a little bit wider as the internal block (in my example, canvasInfo__block2).
The overflow: auto will surely cut, you can't do anything with it, but it won't be very bad because it is enough wide, to contain the internal canvasInfo__block2 and also the gray block overflowing from it.
canvasInfo__block2 needs an overflow: visible, while the external canvasInfo__block can get its overflow: auto.
The result:
HTML:
.canvasInfo
.canvasInfo__title
h3 Title
.hr
.canvasInfo__block
.canvasInfo__block2
.canvasInfo__slider sliderBar
.canvasInfo__activity Motion activity
.row
.circle
span line1
.row
.circle
span line2
.grayBlock hi2
.row
.circle
span line3
.row
.circle
span line4
.row
.circle
span line5
CSS:
.canvasInfo {
margin: 0 auto;
width: 500px;
}
.hr {
margin: 10px 0;
border-bottom: 1px solid red;
}
.canvasInfo__block {
position: relative;
overflow: auto;
width: 400px;
height: 120px;
border: 2px solid red;
}
.canvasInfo__block2 {
position: relative;
overflow: visible;
height: 300px;
width: 300px;
margin-left: auto;
margin-right: auto;
border: 2px solid blue;
}
.grayBlock {
width: 50px;
height: 50px;
background-color: gray;
position: absolute;
top: 0px;
left: -20px;
z-index: -1;
}
.row {
border: 1px solid gray;
position: relative;
}
.circle
{
position: relative;
width: 10px;
height: 10px;
display: inline-block;
border-radius: 60px;
box-shadow: 0px 0px 2px #000;
span {
margin-left: 20px;
}
}
this is what i created:
This is what i want like:
this is my code:
<div id="OR"><span style=" vertical-align: middle;background:blue;">OR</span></div>
this is css:
div #OR { border-radius:50%;border-style:1px solid black;background:red;width:42px;height:42px;float:right; background:red;vertical-align: middle;}
div #OR span{ vertical-align: middle; }
so please help me to bring thart OR in a center of the div.
I don't think you will need an extra element for the OR text, what you need is the line-height property
Demo
div {
height: 50px;
width: 50px;
border: 1px solid #ddd;
border-radius: 50%;
font-weight: bold;
line-height: 50px; /* Equals elements height */
text-align: center;
}
This solution is perfect if you want to vertical-align single word, if you want to perfectly center an element horizontally and vertically, other two approaches are to use display: table-cell; with vertical-align: middle; or use CSS Positioning.
CSS Positioning way..
Explanation: Here am using position: relative; on the wrapper/parent element and than am assigning position: absolute; for the child element. Though, here's a catch, you need to assign fixed width to the child element you are trying to center.
Demo 2
div {
height: 50px;
width: 50px;
border: 1px solid #ddd;
border-radius: 50%;
font-weight: bold;
position: relative;
}
div span {
position: absolute;
border: 1px solid #f00;
left: 50%;
top: 50%;
height: 20px;
width: 24px;
margin-top: -10px; /* Half of the elements height */
margin-left: -12px; /* Half of the elements width */
}
I have a stack of divs down the center of the page (using margin:auto)
now I want to draw a line starting at the center and extending to the right (say 400 pixels). I'm a but stumped, any idea how to make this work nicely?
cheers!
Use this css:
div.line
{
position: absolute;
left: 50%;
width: 50%;
}
div.line
{
width: 400px;
height: 10px;
margin: 0 auto;
border-right: 400px solid black;
}
Personally, I'd just use margins:
Set to the left of the midline:
.leftSide {
width: 400px;
height: 100px;
margin: 0 50% 0 auto;
background: #555;
border: #777 1px solid;
}
or right side of midline
.rightSide {
width: 400px;
height: 100px;
margin: 0 auto 0 50%;
background: #555;
border: #777 1px solid;
}
Put the content inside another tag.
And style the tag as following(for example a div):
div.special_tag {
float: right;
width: 50%;
}