I am using :after content like so
.img-div:after {
content: ".01";
position: absolute;
width: 76.9%;
height: 55%;
top: 10%;
right: 2.5%;
padding: 20px;
background-color: #6758ef;
opacity: .8;
font-size: 59px;
font-weight: 300;
color: #fff;
text-align: center;
}
I want to know that how can I vertically center the content property.
NOTE: I cannot use :before because I have it already for other purpose
https://jsfiddle.net/tfkt5411/
Try This:
.img-div:after {
line-height:197px;
//Other codes...
}
197px is equal height(55%).
See Demo
.img-div-parent{
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: #6758ef;
height: 200px;
width: 200px;
}
.img-div:after {
content: ".01";
position: relative;
width: 76.9%;
height: 55%;
right: 2.5%;
opacity: .8;
font-size: 59px;
font-weight: 300;
color: #fff;
text-align: center;
}
<div class="img-div-parent">
<div class="img-div">
</div>
</div>
you can specify the width, height and background for .img-div then you can use :after easily to center the content vertically and horizontally as well, check the updated fiddle.
Hope this helps :)
.img-div {
height: 300px;
width: 300px;
}
.img-div:after {
content: ".01";
width: 76.9%;
height: 55%;
background-color: #6758ef;
opacity: .8;
font-size: 59px;
font-weight: 300;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
<div class="img-div"></div>
Related
How can I make a dot under text using only CSS as shown in below picture?
The picture needs to be always in middle with any length of string.
Probably I need to use :before OR :after? I've tried but result was awful.
A transformed pseudo element can be used to create this:
body { text-align: center; }
.text {
display: inline-block;
vertical-align: top;
padding-bottom: 10px;
position: relative;
text-align: center;
padding: 20px 10px;
line-height: 24px;
min-width: 100px;
background: #333;
font-size: 20px;
color: #fff;
}
.text::before {
transform: translateX(-50%);
border-radius: 100%;
position: absolute;
background: blue;
bottom: 10px;
height: 8px;
content: '';
width: 8px;
left: 50%;
}
<div class="text">about</div>
.char {
display: inline-block;
position: relative;
}
.char::before {
content: '.';
display: inline-block;
position: absolute;
bottom: -0.5em;
left: 0;
text-align: center;
width: 100%;
}
After writing this question on stack i come up with idea:) Its works excatly like I want :)
How can I make a dot under text using only CSS as shown in below picture?
The picture needs to be always in middle with any length of string.
Probably I need to use :before OR :after? I've tried but result was awful.
A transformed pseudo element can be used to create this:
body { text-align: center; }
.text {
display: inline-block;
vertical-align: top;
padding-bottom: 10px;
position: relative;
text-align: center;
padding: 20px 10px;
line-height: 24px;
min-width: 100px;
background: #333;
font-size: 20px;
color: #fff;
}
.text::before {
transform: translateX(-50%);
border-radius: 100%;
position: absolute;
background: blue;
bottom: 10px;
height: 8px;
content: '';
width: 8px;
left: 50%;
}
<div class="text">about</div>
.char {
display: inline-block;
position: relative;
}
.char::before {
content: '.';
display: inline-block;
position: absolute;
bottom: -0.5em;
left: 0;
text-align: center;
width: 100%;
}
After writing this question on stack i come up with idea:) Its works excatly like I want :)
I have to display on the mobile view for a webpage a list of divs, where each of them has a specific background-image and central h1 where I display the title. Stacked on each of these divs with the background-image, there is a black div with an opacity: 0.5 to make the image darker.
This is the my code:
.square-container {
min-height: auto;
background-color: white;
}
.square {
width: 100vmin;
height: 100vmin;
color: white;
}
.hover-square {
background: black;
width: 100vmin;
height: 100vmin;
margin-top: 0;
margin-bottom: 4px;
position: absolute;
opacity: 0.5;
}
.square-logo {
width: 12.5%;
height: auto;
margin-left: 50%;
transform: translateX(-50%);
}
h1 {
height: 87.5vmin;
width: 100%;
font-size: 36px;
text-align: center;
vertical-align: middle;
line-height: 100vmin;
margin: 4px auto;
z-index: 10 !important;
}
.square h1.first {
margin-top: 50px;
margin-bottom: 4px;
}
<div class="square-container">
<div class="square" style="background-color: #e74c3c">
<div class="hover-square"></div>
<h1 class="first">Case 1</h1>
<img class="square-logo" src="//pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png">
</div>
</div>
It is correctly working, but the title is kept below the black div. I have tried to modify the z-index of the h1 tag, but I had no luck so far. Do you have an idea on how to solve this issue?
This is a JSFiddle with the complete code. Thanks in advance for your replies!
When one mix elements (siblings) where some have a position other than static, they end up in a higher layer, hence, in your case, the h1 sits behind.
As mentioned, for z-index to work it need a position (other than static), though one rarely need to use z-index, instead make sure all, or none, has a position, so in your case, simply drop z-index and add position: relative
.square-container {
min-height: auto;
background-color: white;
}
.square {
width: 100vmin;
height: 100vmin;
color: white;
}
.hover-square {
background: black;
width: 100vmin;
height: 100vmin;
margin-top: 0;
margin-bottom: 4px;
position: absolute;
opacity: 0.5;
}
.square-logo {
width: 12.5%;
height: auto;
margin-left: 50%;
transform: translateX(-50%);
}
h1 {
position: relative;
height: 87.5vmin;
width: 100%;
font-size: 36px;
text-align: center;
vertical-align: middle;
line-height: 100vmin;
margin: 4px auto;
}
.square h1.first {
margin-top: 50px;
margin-bottom: 4px;
}
<div class="square-container">
<div class="square" style="background-color: #e74c3c">
<div class="hover-square"></div>
<h1 class="first">Case 1</h1>
<img class="square-logo" src="//pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png">
</div>
</div>
If the sole purpose of the hover-square is to darken the square, you could use a pseudo element instead, and save some markup and gain some flexibility
.square-container {
min-height: auto;
background-color: white;
}
.square {
position: relative;
width: 100vmin;
height: 100vmin;
color: white;
}
.square::before { /* added/changed to pseudo */
content: '';
background: black;
width: 100vmin;
height: 100vmin;
margin-top: 0;
margin-bottom: 4px;
position: absolute;
opacity: 0.5;
}
.square-logo {
width: 12.5%;
height: auto;
margin-left: 50%;
transform: translateX(-50%);
}
h1 {
position: relative;
height: 87.5vmin;
width: 100%;
font-size: 36px;
text-align: center;
vertical-align: middle;
line-height: 100vmin;
margin: 4px auto;
}
.square h1.first {
margin-top: 50px;
margin-bottom: 4px;
}
<div class="square-container">
<div class="square" style="background-color: #e74c3c">
<h1 class="first">Case 1</h1>
<img class="square-logo" src="//pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png">
</div>
</div>
For z-index to work you need to create stacking context and the easiest way to do this in this case is to just set position: relative on h1 element.
DEMO
But if you want h1 under navbar then you also need to set higher z-index on navbar so if h1 is 10 then navbar must be 11.
Just use position: relative
DEMO HERE
CSS
h1 {
position: relative;
height: 87.5vmin;
width: 100%;
font-size: 36px;
text-align: center;
vertical-align: middle;
line-height: 100vmin;
margin: 4px auto;
z-index: 10 !important;
}
I am running into an issue where my contact-section-left is not centering in the parent div. This is not a vertical-align: top issue. You can see the border-right white line, that is showing how much the height extends for the contact-section-left div is, but I am it to be the same size as the right side with the image (sorry the example doesn't have the image).
I am not sure if I am going for the wrong approach here or what, but I am wanting it to look like the paint image I made below.
Any ideas?
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#contact-section {
width: 100%;
background: #00a16d;
}
#contact-section-wrap {
padding: 2%;
}
#contact-section-left, #contact-section-right {
height: 100%;
display: inline-block;
color: #FFF;
font-size: 1.5em;
padding: 1% 0;
position: relative;
}
#contact-section-left {
width: 60%;
border-right: 1px solid #FFF;
font-style: italic;
}
#contact-section-right {
width: 30%;
text-align: center;
}
#contact-img {
background-image: url("../icons/envelope.png");
background-repeat: no-repeat;
background-size: auto;
margin: 0 auto;
display: block;
width: 128px;
height: 128px;
position: relative;
}
#contact-width {
width: 200%;
font-size: 2em;
}
.total-width {
width: 100%;
}
<div id="contact-section">
<div id="contact-section-wrap">
<div id="contact-section-left">
<div class="total-center total-width">Tell us more about your project.</div>
</div><div id="contact-section-right">
<div id="contact-img"><span class="total-center" id="contact-width">Contact us</span></div>
</div>
</div>
</div>
Your entire code can be simplified as follows. I use a pseudo element for the vertical line in between, and shift the position with order via flexbox.
jsFiddle
#contact-section {
display: flex;
justify-content: space-around;
align-items: center;
color: #FFF;
background: #00a16d;
padding: 1em 2em;
}
#contact-section:before {
content: "";
flex: 0 0 1px;
height: 2em;
background: #fff;
order: 2;
}
#contact-section-left {
font-size: 1.5em;
order: 1;
font-style: italic;
}
#contact-section-right {
background: url("https://i.imgur.com/cLMHUZE.png") center / contain no-repeat;
font-size: 2em;
order: 3;
padding: .5em 0;
}
<div id="contact-section">
<div id="contact-section-left">Tell us more about your project.</div>
<div id="contact-section-right">Contact us</div>
</div>
Assiging display: flex; align-items: center; to the parent of the left/right sections will display them side-by-side and center them vertically. Then if you move the border-right from the left (shorter) element to a border-right of the right (taller) element, the line should look more like you want it.
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#contact-section {
width: 100%;
background: #00a16d;
}
#contact-section-wrap {
padding: 2%;
display: flex;
align-items: center;
}
#contact-section-left, #contact-section-right {
height: 100%;
display: inline-block;
color: #FFF;
font-size: 1.5em;
padding: 1% 0;
position: relative;
}
#contact-section-left {
width: 60%;
font-style: italic;
}
#contact-section-right {
width: 30%;
text-align: center;
border-left: 1px solid #FFF;
}
#contact-img {
background-image: url("../icons/envelope.png");
background-repeat: no-repeat;
background-size: auto;
margin: 0 auto;
display: block;
width: 128px;
height: 128px;
position: relative;
}
#contact-width {
width: 200%;
font-size: 2em;
}
.total-width {
width: 100%;
}
<div id="contact-section">
<div id="contact-section-wrap">
<div id="contact-section-left">
<div class="total-center total-width">Tell us more about your project.</div>
</div><div id="contact-section-right">
<div id="contact-img"><span class="total-center" id="contact-width">Contact us</span></div>
</div>
</div>
</div>
Your #contact-section-wrap doesn't have a height. The height: 100%s you are setting aren't really doing anything. They still rely on a parent height to have any idea what they're getting 100% of.
Try setting a height on #contact-section-wrap.
Why this is happening? I need someone who can explain why divs not aligning properly?
HTML and CSS:
.horizontal-ruler {
width: 100%;
height: 25px;
line-height: 25px;
display: block;
font-size: 14px;
color: #373737;
}
.horizontal-ruler .ruler-unit {
width: 30px;
text-align: center;
display: inline-block;
line-height: 25px;
height: 25px;
vertical-align: middle;
}
.h-ruler-first-line,
.h-ruler-second-line {
width: calc(50% - 15px);
margin: 12px 0;
height: 1px;
background-color: #373737;
display: inline-block;
}
<div class="horizontal-ruler">
<div class="h-ruler-first-line"></div><!--
--><div class="ruler-unit">24"</div><!--
--><div class="h-ruler-second-line"></div>
</div>
https://jsfiddle.net/6xuvr6vw/1/
As you can see the .ruler-unit is not contained into the .horizontal-ruler.
You need to add vertical-align: middle to lines also
.horizontal-ruler {
width: 100%;
height: 25px;
line-height: 25px;
display: block;
font-size: 14px;
color: #373737;
}
.horizontal-ruler .ruler-unit {
width: 30px;
text-align: center;
display: inline-block;
line-height: 25px;
height: 25px;
vertical-align: middle;
}
.h-ruler-first-line,
.h-ruler-second-line {
width: calc(50% - 15px);
vertical-align: middle;
margin: 12px 0;
height: 1px;
background-color: #373737;
display: inline-block;
}
<div class="horizontal-ruler">
<div class="h-ruler-first-line"></div><!--
--><div class="ruler-unit">24"</div><!--
--><div class="h-ruler-second-line"></div>
</div>
You can achieve it with just 2 div elements using :after and :before pseudo elements.
.horizontal-ruler{
text-align: center;
overflow: hidden;
line-height: 25px;
font-size: 14px;
color: #373737;
height: 25px;
}
.horizontal-ruler .ruler-unit {
display: inline-block;
vertical-align: top;
position: relative;
padding: 0 10px;
}
.horizontal-ruler .ruler-unit:before,
.horizontal-ruler .ruler-unit:after {
background-color: #373737;
position: absolute;
margin-top: -1px;
width: 9999px;
height: 1px;
right: 100%;
content: '';
top: 50%;
}
.horizontal-ruler .ruler-unit:after {
right: auto;
left: 100%;
}
<div class="horizontal-ruler">
<div class="ruler-unit">24"</div>
</div>
A slightly different approach to your solution -this features a border bottom on the entire div and the a relative position of the text down over the line to give the appearance that it is two line separated by the text content. Could probably be better - just dodgied it up to show you an alternative that does not take much code to achieve the same effect.
.horizontal-ruler{
border-bottom:solid 1px #373737;
text-align:center;
}
.ruler-unit{
font-size:24px;
width:30px;
margin:0 auto;
padding: 0 10px;
position:relative;
top:14px;
background:white;
}
<div class="horizontal-ruler">
<div class="ruler-unit">24"</div>
</div>
Add vertical-align: middle to the lines:
.h-ruler-first-line, .h-ruler-second-line {
width: calc(50% - 15px);
margin: 12px 0;
height: 1px;
background-color: #373737;
display: inline-block;
vertical-align: middle;
}
fiddle: https://jsfiddle.net/udwffajo/