I am currently working on a project in which I am using some divs, and the :after pseudo-element. I would like to be able to center the :after text inside the div. Can anybody help me out here?
Example of problem: http://jsfiddle.net/JohnFish/7ra5t/
Another way to do it:
.example { ... position: relative; }
.example:after { ...
position: absolute;
top: 50%; margin-top: -{50% of the element's height};
left: 50%; margin-left: -{50% of the element's width};
}
I think you just have to add a text-align: center in your CSS:
.example {
background: black;
height: 250px;
width: 500px;
text-align: center
}
.example:after {
content: "+";
color: white;
font-size: 100px;
}
If you also want vertical alignment:
.example {
background: black;
height: 250px;
width: 500px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.example:after {
content: "+";
color: white;
font-size: 100px;
}
You can also try with flex
.example {
display: flex;
justify-content: center;
}
Related
div.st-header-image {
width: 100%;
background-color: #a7b885;
margin: 0px;
text-align: center;
overflow: hidden;
}
div.st-header-image p.st-description {
margin: 0px;
color: red;
font-size: 40px;
line-height: 40px;
vertical-align: middle;
}
div.st-header-image ::before {
content: " ";
padding-top: 40%;
display: inline-block;
}
<body>
<div class="st-header-image">
<p class="st-description">Header Image</p>
</div>
</body>
I am trying to make a paragraph that needs to be inside div that have ::before style as well so it changes size when I increase or decrease the resolution.
I try using different overflows, different display... Also tried to fix it using calc((100% - 40px) / 2) for positioning top/bottom but it doesn't seem to work either.
div.st-header-image
{
width:100%;
background-color: rgb(167, 184, 133);
margin:0px;
text-align: center;
overflow: hidden;
p.st-description
{
margin:0px;
color:red;
font-size:40px;
line-height: 40px;
vertical-align: middle;
}
::before
{
content: " ";
padding-top: 40%;
display: inline-block;
}
}
p element is inside of div with class st-header-image
Div is responsive but paragraph keeps showing under the div instead in center of it...
What you want to accomplish is to have the div with a responsive space on top and also the paragraph sticking to the middle during it's responsiveness.
I fixed you code without the ::before pseudo element.
This same feature can be attained using a padding for the div and a little positioning.
I shared the code on repl.it here
Here is the CSS you need:
div.st-header-image {
width: 100%;
background-color: #a7b885;
margin: 0px;
text-align: center;
overflow: hidden;
padding-top: 40%;
position: relative;
}
p.st-description {
margin: 0px;
color: red;
font-size: 40px;
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
padding-top: 15%;
}
Looking at your code, i assume you are using CSS Preprocessor SASS. With that you need to append "p" element before "::before" selector
**p::before** {
content: " ";
padding-top: 40%;
display: inline-block;
}
or you can include it using ampersand like this
p.st-description
{
margin:0px;
color:red;
font-size:40px;
line-height: 40px;
vertical-align: middle;
&::before
{
content: " ";
padding-top: 40%;
display: inline-block;
}
}
You should use display flex . its allows always center position.
use this code.
HTML
<body>
<div class="st-header-image">
<p class="st-description">Header Image</p>
</div>
</body>
css
div.st-header-image {
width: 100%;
background-color: #a7b885;
margin: 0px;
text-align: center;
overflow: hidden;
}
div.st-header-image p.st-description {
margin: 0px;
color: red;
font-size: 40px;
line-height: 40px;
display:flex;
display:-webkit-flex;
align-items:center;
-webkit-align-items:center;
justify-content: center;
-webkit-justify-content: center;
}
div.st-header-image ::before {
content: " ";
padding-top: 40%;
display: inline-block;
}
I hate CSS like the plague.
I have a table header, with several table cells inline. This works perfectly until I start trying to add an image to one of the cells, which causes the height of the div to extend but I have absolutely no idea why.
Example of blank table cells working perfectly.
Example of the demon that has been haunting me all day.
.header {
display: table;
width: 100%;
background: white;
border-bottom: 2px solid #eeeff3;
.burger-menu {
width: 75px;
margin-left: auto;
margin-right: auto;
background: url("https://s23.postimg.org/o8wb4i5u3/1484768142_menu_alt.png");
background-size: 30px 30px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
cursor: pointer;
text-indent: 0px;
}
}
.outer {
display: table;
vertical-align: top;
position: relative;
height: 100%;
width: 100%;
}
.outer-icon {
display: table-cell;
position: relative;
height: 75px;
width: 5%;
overflow: hidden;
border-right: 2px solid #eeeff3;
img {
height: 100%;
}
}
.middle {
display: table-cell;
vertical-align: middle;
}
.search-bar {
display: table-cell;
vertical-align: top;
width: 80%;
input {
height: 75px;
border: 0;
padding: 0;
width: 100%;
border-right: 2px solid #eeeff3;
}
}
.inner {
width: 75px;
margin-left: auto;
margin-right: auto;
}
Can anyone put me out of my misery?
Remove height from .outer-icon. I don't know that it's ever a good idea to apply height to a table cell. Set vertical-align: middle; on .search-bar and .outer-icon.
I don't know if this will solve everything but changing display on add-friend seems to improve things:
.add-friend {
background-image: url(https://placeimg.com/75/75/face);
width: 75px;
height: 75px;
display: inherit; <- this here thingy
}
https://codepen.io/anon/pen/zNNdYw
I don't think you want to set an explicit height on .outer-icon because you are wrapping a lot of elements with it and should let the inner content set the height.
.outer-icon {
height: 75px; // remove this line!!!
}
Then set the hamburger menu to be absolute inside of its relative parent div.
.burger-menu {
position: absolute;
left: 20px;
top: 25px;
}
Cheers
I would like to get result something like this:
◄ ███████ ►
Is it possible to make arrows with pseudo-elements :before and :after?
JSFiddle example which demonstrates the problem
<div class="scroll"></div>
.scroll {
width: 100px;
}
.scroll::before {
content: "◀";
}
.scroll::after {
content: "▶";
}
Here it is.
.scroll {
width: 100px;
background-color: grey;
margin: 0 1.2em;
position: relative;
overflow: visible;
min-height: 1.2em;
}
.scroll:before,
.scroll:after {
position: absolute;
color: grey;
min-height: 1.2em;
width: 1.2em;
top: 50%;
transform: translateY(-50%);
line-height: 1.3em;
text-align: center;
}
.scroll:before {
content: "◀";
right:100%;
}
.scroll:after {
content: "▶";
left: 100%;
}
<div class="scroll"></div>
Update. Following discussion in chat, here's how I'd style custom scrollbars on a div. Please note that as of now they are just painted, the div changes size based on content. I know nothing about the logic behind your need to paint scrollbars instead of trusting browsers with it. :)
This is sort of a hack but it works. It involves setting margins.
Here is the updated fiddle
https://jsfiddle.net/j08L8a3b/1/
.scroll {
width: 100px;
margin-left: auto;
margin-right: auto;
background-color: grey;
}
.scroll::before {
content: "◀";
color: grey;
margin-left: -20px;
background-color: white;
height: 100%;
min-height: 100%;
}
.scroll::after {
content: "▶";
margin-left: 120px;
color: grey;
background-color: white;
}
I have two inline-block divs, each 50% width of its parent, and they are correctly shown next to each other. But, when I add a link to one of those divs, there's a gap on top of the second div
<div class="wrap">
<div class="resizable resizable1">
link1
link2
</div><!--
--><div class="resizable resizable2">second</div>
</div>
.wrap {
width: 100%;
font-size: 0;
}
.resizable {
width: 50%;
height: 120px;
background-color: coral;
display: inline-block;
}
.resizable2 {
background-color: lightblue;
}
.resizable a {
font-size: 12px;
}
Jsfiddle example http://jsfiddle.net/KyEr3/455/
How can align the two divs?
When using display: inline-block elements by default are set to baseline, instead set vertical-align: top
.resizable {
width: 50%;
height: 120px;
background-color: coral;
display: inline-block;
vertical-align: top;
}
FIDDLE
You can also float them both left, they will align next to each other in the wrapper.
.wrap {
width: 100%;
font-size: 0;
}
.resizable {
width: 50%;
height: 120px;
background-color: coral;
display: inline-block;
float:left;
}
.resizable2 {
background-color: lightblue;
float:left;
}
.resizable a {
font-size: 12px;
}
I'm trying to display a block of text on top of image in such a way that it displays only on hovering on the image. The text is displaying as I want but, the background applied to the div is not.
Here is the jsfiddle: http://jsfiddle.net/HZqyA/1/
Hovering over the image displays the word stars but, I want it to display with white background underneath the word 'stars'. What am I doing wrong?
Thanks.
CSS from jsfiddle pasted below. Having trouble pasting html
CSS:
.pu {
display:block;
width:185px;
}
.add_rating {
min-width: 140px;
display: inline-block;
background: rgb(255,255,255);
background-color: rgb(255,255,255);
color: #f00;
text-align: center;
}
.pu .add_rating {
display: none;
margin-top: -30px;
margin-bottom: 12px;
width: 100%;
background: rgb(255,255,255);!important;
background-color: rgb(255,255,255);!important;
background-image: rgb(255,255,255);!important;
min-height: 22px;
}
.pu:hover .add_rating {
display: block;
background: rgb(255,255,255);!important;
background-color: rgb(255,255,255);!important;
background-image: rgb(255,255,255);!important;
z-index: 1000;
}
You need to add a position property other than the default, static so that you can create a new stacking context and so that z-index will apply. Adding position: relative; to .pu:hover .add_rating will enable you to put the background of .add_rating on top of the image.
.pu:hover .add_rating {
display: block;
background: rgb(255,255,255);
position: relative;
z-index: 1000;
}
http://jsfiddle.net/HZqyA/3/
Would you mind if I cleaned some junky CSS in your fiddle? Take a look
Demo
.pu {
position: relative;
display: inline-block;
}
.pu:hover .add_rating {
display: block;
color: #f00;
}
.add_rating {
display: none;
position: absolute;
bottom: 5px;
background: #fff;
width: 100%;
text-align: center;
}
Note: You are using !important which you should ignore it unless
required, I've cropped down your CSS drastically
Use position:absolute to .add_rating and position:relative to parent div
Your CSS is pretty long and that is not really required so compress it like this
.pu {
display:block;
width:185px;
position:relative
}
.add_rating {
position:absolute;
bottom:0; left:0;
min-width: 140px;
background: rgb(255,255,255);
color: #f00;
text-align: center;
display: none;
margin-top: -30px;
margin-bottom: 12px;
width: 100%;
min-height: 22px;
}
.pu:hover .add_rating {
display: block;
}
DEMO