This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
How can I horizontally center an element?
(133 answers)
Closed 4 years ago.
This is what I am trying to achieve. I tried using absolute position and it seemed to work on one screen size but doesn't work for others.
.countdown {
width: 200px;
background: #b02d1b;
margin: 0;
border-radius: 5px;
color: #fff;
text-align: center;
padding: 5px;
position: absolute;
z-index: 1;
}
.countdown-bg {
width: 100%;
border-top: solid 1px #ccc;
position: absolute;
margin: 12px;
}
<div class="countdown"> Final Hours </div>
<div class="countdown-bg"></div>
I think I have a solution for your question:
.divOuter {
background-color: #cccccc;
width: 100%;
height: 2px;
position: absolute;
}
.divInner {
background-color: #cc0000;
width: 130px;
height: 20px;
position: relative;
top: -12px;
margin: 0 auto;
color: #ffffff;
text-align: center;
font-family: Verdana;
font-size: 0.8em;
font-weight: bold;
border-radius: 10px;
border: 4px solid #ffffff;
}
<div class="divOuter">
<div class="divInner">FINAL HOURS!</div>
</div>
Brief explanation:
We have two divs, the second one in the html is on top of the first one. This placement in CSS is called a float.
When we need this effect we use the "position" property of the CSS with values like Absotule and Relative.
In this case, the first Div makes the thin line and the second Div makes the red rectangle.
The "top", "left", "right" and "button" property of the css causes to align the second Div relative to the first. And the property "margin: auto" causes the internal div to be aligned to the center of the external div.
I hope I've helped!
Without flexbox
Wrapp one div inside another div. Make the outer div position: relative and the inner div position: absolute. Center the inner div with left and transform
.countdown {
position: relative;
border-top: solid 1px #ccc;
margin: 15px 0;
}
.countdown>.content {
width: 200px;
text-align: center;
background: #b02d1b;
border-radius: 5px;
color: #fff;
padding: 5px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
text-transform: uppercase;
}
<div class="countdown">
<div class="content">Final Hours!</div>
</div>
With flexbox
The advantage of using flexbox is that you don't have to set positions and that you can center with justify-content.
.countdown {
border-top: solid 1px #ccc;
margin: 15px 0;
display: flex;
justify-content: center;
}
.countdown>.content {
width: 200px;
text-align: center;
background: #b02d1b;
border-radius: 5px;
color: #fff;
padding: 5px;
transform: translateY(-50%);
z-index: 1;
text-transform: uppercase;
}
<div class="countdown">
<div class="content">Final Hours!</div>
</div>
Related
I'm doing a design using HTML & CSS to represent that I'm doing a calculation with the data that will be entered on the fields.
What I want to achieve:
What I have tried:
.bracket-dividers {
border-left: 4px solid #000;
border-right: 4px solid #000;
position: relative;
display: inline-flex;
}
.bracket-dividers:before {
content: '';
height: 4px;
width: 10px;
background: #000;
position: absolute;
top: 0;
}
.bracket-dividers:after {
content: '';
height: 4px;
width: 10px;
background: #000;
position: absolute;
bottom: 0;
}
.plus-symbol {
height: 35px;
width: 35px;
color: #000;
font-size: 35px;
line-height: 35px;
text-align: center;
align-self: center;
}
.plus-symbol::before {
content: '+';
}
<div class="bracket-dividers">
<div>
Field 1
</div>
<span class="plus-symbol"></span>
<div>
Field 2
</div>
</div>
Issues In the example above:
if I copy-paste the .bracket-dividers:before and .bracket-dividers:after but changing the position (right & top = 0, right & bottom = 0), causes that the horizontal lines of the left side disappear. Maybe we cannot have more than 1 before/after selector?
I try to apply margin or padding to the content inside but, don't work. Seems that the selectors don't allow this.
My goal is to apply the vertical and horizontal lines on both sides to a div and apply a space inside for the content (margin or padding).
No, you cannot define multiple pseudo-elements (::before / ::after) for a single element.
Instead, imagine using the ::before pseudo-element for the left bracket and the ::after pseudo-element for the right bracket.
The left bracket is an element with top, left and bottom borders defined, while the right bracket is an element with the top, right and bottom borders defined.
Example:
.bracket-dividers {
position: relative;
display: inline-flex;
margin-left: 10px;
margin-right: 10px;
line-height: 35px;
padding: 30px; /* Extra padding works correctly! */
}
.bracket-dividers:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -10px;
width: 10px;
box-sizing: border-box;
border: 4px solid #000;
border-right: 0;
}
.bracket-dividers:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -10px;
width: 10px;
box-sizing: border-box;
border: 4px solid #000;
border-left: 0;
}
.plus-symbol {
height: 35px;
width: 35px;
color: #000;
font-size: 35px;
line-height: 35px;
text-align: center;
align-self: center;
}
.plus-symbol::before {
content: '+';
}
<div class="bracket-dividers">
<div>
Field 1
</div>
<span class="plus-symbol"></span>
<div>
Field 2
</div>
</div>
A border-image can do it:
.bracket-dividers {
border: 4px solid transparent;
border-image:linear-gradient(to right,#000 10px,transparent 0 calc(100% - 10px),#000 0) 4;
padding:10px;
display: inline-flex;
}
.plus-symbol {
height: 35px;
width: 35px;
color: #000;
font-size: 35px;
line-height: 35px;
text-align: center;
align-self: center;
}
.plus-symbol::before {
content: '+';
}
<div class="bracket-dividers">
<div>
Field 1
</div>
<span class="plus-symbol"></span>
<div>
Field 2
</div>
</div>
I'm trying to create a div that has a left and top border with text in top line. what I am trying to achieve is the following...
html half box
I am able to get the top with the text using the following css or alternately a table but can't get it with the left border also. any 'outside the box' thinkers?
.hr-sect {
display: flex;
align-items: center;
color: blue;
margin: 8px 0px;
}
.hr-sect::before
{
content: "";
width: 20px;
background: #000;
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}
.hr-sect::after {
content: "";
width:100%;
background: #000;
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}
CATEGORY
CATEGORY
You can simulate that interrupted border line by using an absolutely placed div that has a non-transparent background, just make sure it matches the actual background color.
.half-box {
border-left: 1px solid black;
border-top: 1px solid black;
position: relative;
padding: 30px;
}
.half-box > .title {
background-color: white;
padding: 0 10px;
position: absolute;
top: 0;
left: 30px;
font-size: 20px;
transform: translateY(-50%);
}
<div style="height: 100px">
</div>
<div class="half-box">
some content
<div class="title">
CONTENT
</div>
</div>
Set a positioning context on the outer box with position: relative;
For the border, use a pseudo ::before element with content: " "; and give it a position: absolute; to take it out of the flow. Give it a top and left border.
For the heading, also use position: absolute; and move it up with top: -20px or whatever. Set the same background color as the outer box to mask the border.
Adjust your margins and paddings as needed.
See this codepen: https://codepen.io/matthewsmith_io/pen/RVYQqy
I am trying to get this done in HTML and CSS. I am able to get the box done using the border and padding. But how do I get the line above?
Here is what I have so far:
.november {
padding: 1%;
border: 2px solid #000;
}
<div class="november">November 2014</div>
Pseudo element goodness
The HTML
It's a one liner:
<div>November 2014</div>
The CSS
The vertical line is created with a :before pseudo element:
The :before pseudo element is given position: absolute
left: 50% shifts the line to the middle and bottom: 100% pops the line above the div
The line is created by the 2px width
margin-left: -2px shifts the line 2px to the left to correctly offset its position (this is equal to the width)
The div is made position: relative and the position: absolute :before will position itself in relation to it. Space above the div is created with the top margin.
Complete Example
In this example, display: inline-block allows the div to expand and retract with its contents.
div {
padding: 10px;
border: solid 2px #000;
display: inline-block;
position: relative;
margin-top: 50px;
}
div:before {
content: '';
width: 2px;
height: 50px;
background: #000;
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -2px;
}
<div>November 2014</div>
I tried this and got it right:
body {
background: #EEE;
}
.november {
margin: 0;
padding: 1%;
border: 2px solid white;
clear: both;
}
<div class="col-sm-2">
<hr style="width: 2px; border-top: 50px solid white; padding: 0; text-align: center; margin: auto;" />
<div class="november">November 2014</div>
</div>
The following vertically centers the inner div
HTML
<button class="outer">
<div class="inner">
Hello<br>World
</div>
</button>
CSS
.outer {
position: absolute;
top: 25%;
left: 25%;
bottom: 25%;
right: 25%;
padding: 0;
background: none;
border: none;
outline: dashed 1px black;
font-family: sans-serif;
font-size: 16px;
text-align: center;
}
.inner {
background: #ccc;
}
JSFiddle
But if I use a div instead of a button for the outer element,
For semantic reasons, I want a div not a button.
What CSS styles do I need to add to the .outer class to produce the same vertical-alignment styling that the button had?
I need this to work in Chrome and FF.
This is What you need: Link: http://jsfiddle.net/WP8um/2/
OR If you don't want margin on outer div you can use top,left,bottom,right properties. http://jsfiddle.net/WP8um/3/
CSS
.outer {
display: inline;
margin:25%;
background: none;
outline: dashed 1px black;
border: none;
padding: 0;
width: 200px;
height:200px;
}
.inner {
background: #ccc;
text-align:center;
margin: 50% 0;
}
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 */
}