Here is my problem:
I have a <h1> inside <div> but when I set a border-radius in <div> the <h1> is out from the div, here is my code:
<div class="test"><h1 class="text">test</h1></div>
.test{
background: red;
height: 300px;
width: 300px;
border-radius: 150px;
display: inline-block;
position: relative;
}
.test .text{
display: inline-block;
background: green;
margin: auto;
position: relative;
}
and this is live run
http://jsfiddle.net/n3aru/
Your text is actually not outside your div:
The visuality has just changed, not the structure.
You may want to position your text to the center:
.test{
background: red;
height: 300px;
width: 300px;
border-radius: 150px;
display: inline-block;
position: relative;
text-align: center;
}
.test .text{
display: inline-block;
background: green;
margin: auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
jsFiddle
Centering trick: http://css-tricks.com/centering-percentage-widthheight-elements/
.test{
overflow: hidden;
}
Set the margin of the inner div. Something like this:
margin-top:50px;
margin-left:50px;
A much more concise way to center that text (if that's what you're after):
.test .text
{
margin: 0; /* Only need this because h1 elements have default margin. */
text-align: center;
line-height: 300px;
}
jsFiddle (taken from #nkmol as a base).
Related
I am looking to display a 'SALE' tag just before an image, I have tried to do this using the 'before' pseudo element however nothing seems to be displaying on the screen.
I am trying to create the 'SALE' tag inside a circle with black background.
Below is the code that I have used
<span class"bag-image">
<img src="https://images-na.ssl-images-
amazon.com/images/I/71lDa7EbWSL._UY395_.jpg" class="image">
</span>
.bag-image::before{
background-color: #red;
content: 'SALE';
border-radius: 500px;
display: inline-block;
width: 100px;
height: 100px;
}
For visual reference:
LIKE THIS
https://codepen.io/anon/pen/rgLPdp
Make the bag-image class position: relative;
Make the bag-image:before position: absolute; and position it with top/left or margins and set the line-height to vertically center the SALE text.
You can give the pseudo-class a lower z-index so that only the top half is visible, e.g. z-index: -1;
You can use margin-top: -2.5em; margin-left: 175px; in the pseudo-code to position it.
div.bag-image {
display: inline-block;
/* just so that we can see in the example */
margin-top: 3em;
}
div.bag-image:before {
position: absolute;
background-color: #ff0000;
content: 'SALE';
text-align: center;
color: #ffffff;
margin-top: -2.5em;
margin-left: 175px;
/* optionally make it a circle */
border-radius: 9999px;
height: 3em;
padding: 1em;
line-height: 3em;
}
/* just for clarity */
img.image {
border: 1px solid #ccc;
}
<div class="bag-image">
<img src="https://images-na.ssl-images-amazon.com/images/I/71lDa7EbWSL._UY395_.jpg" class="image">
</div>
I think you want this. Also check the codepen.Codepen
<style>
.bag-image{
text-align:center;
}
.bag-image::before{
content: 'SALE';
border-radius: 50px;
background: red;
display: inline-block;
width: 100px;
height: 100px;
position: absolute;
line-height: 100px;
color: #fff;
}
</style>
In summary, you need to add the position: relative property to the span, and the position: absolute property to the ::after element. Something like this:
.bag-image {
position: relative;
display: block;
}
.bag-image::after {
background-color: red;
content: 'SALE';
border-radius: 500px;
display: block;
width: 100px;
height: 100px;
position: absolute;
top: 0px;
text-align: center;
left: 100px;
}
<span class="bag-image">
<img src="https://images-na.ssl-images-amazon.com/images/I/71lDa7EbWSL._UY395_.jpg" class="image">
</span>
Play with the left (and maybe the top) property to place the text in the desired position.
You can try this code:
your code background-color: #red; is the wrong to declared #red it's instant of only red.
the sale is a position by my self parent relatively, you can learn about more position https://www.w3schools.com/css/css_positioning.asp .
here also write a shadow element related to some code for needed your answer.
maybe it solves your problem.
=== Thanks ===
.bag-image {
margin-top: 50px;
position: relative;
border: 1px solid red;
}
.bag-image img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.bag-image::before{
background-color: red;
content: 'SALE';
border-radius: 500px;
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
color: #fff;
position:absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="bag-image">
<img src="https://images-na.ssl-images-amazon.com/images/I/71lDa7EbWSL._UY395_.jpg" class="image">
</div>
I need help centering two divs vertically in a fixed width/height div, where the two div scales in the middle of the parent div.
the first child div has a max-height, so it can scales dynamically to an extent. How can I center them so that teal and green divs goes in the middle of blue vertically?
JSFiddle HERE : https://jsfiddle.net/850sdmhj/
.subtext-container {
position: absolute;
width: 180px;
height: 65px;
color: #ffffff;
background-color: blue;
bottom: 0;
}
.color-teal {
max-height: 40px;
overflow: hidden;
background-color: teal;
}
.color-green {
max-height: 13px;
font-size: 9px;
background-color: green;
}
<div class="subtext-container">
<div class="color-teal">teal</div>
<div class="color-green">green</div>
</div>
Try display:flex property to make it work.
Updated CSS:
.subtext-container {
position: absolute;
width: 180px;
height: 65px;
color: #ffffff;
background-color: blue;
bottom: 0;
display: flex;
justify-content: center;
flex-direction: column;
}
.color-teal {
max-height: 40px;
overflow: hidden;
background-color: teal;
}
.color-green {
height: 13px;
font-size: 9px;
background-color: green;
}
Example fiddle : Demo
Note : Please check the browser support.
Browser support : http://caniuse.com/#feat=flexbox
Use the following CSS for the subtext-container
.subtext-container {
position: relative;
width: 180px;
height: 65px;
color: #ffffff;
background-color: blue;
bottom: 0;
display:table-cell;
vertical-align:middle;
}
Updated Fiddle https://jsfiddle.net/850sdmhj/1/
Maybe, by using a wrapper like
.color-wrap{
position:relative; top:50%;
transform:translateY(-50%)
}
.subtext-container {
position: absolute;
width: 180px;
height: 65px;
color: #ffffff;
background-color: blue;
bottom: 0;
}
.color-teal {
max-height: 40px;
overflow: hidden;
background-color: teal;
}
.color-green {
height: 13px;
font-size: 9px;
background-color: green;
}
.color-wrap{
position:relative; top:50%;
-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)
}
<div class="subtext-container">
<div class="color-wrap">
<div class="color-teal">teal</div>
<div class="color-green">green</div>
</div>
</div>
I would put .color-teal and .color-green inside another dive with ".vertical-align" class.
<div class="subtext-container">
<div class="vertical-align">
<div class="color-teal">teal</div>
<div class="color-green">green</div>
</div>
</div>
And then in CSS file:
.vertical-align{ /* This will do the trick to center content vertically */
display: table-cell;
vertical-align: middle;
}
.subtext-container {
display: table; /* Add Display Table to the container */
}
This will work only if the container (the one with display:table) has a fixed height.
Your fiddle with the working example: https://jsfiddle.net/rx79sb6m/
Also you can read this post where you can find another 5 methods to achieve the same result.
Here is my jfiddle - fiddle, everything is perfect here but only the probelm is when you minimise the window the image goes down , need to fit that image in vertically center which is not happening now
HTML:
<div class="left_panel">
<div class="slide-frame">
<img src="http://www.w3schools.com/bootstrap/paris.jpg">
</div>
</div>
CSS:
.left_panel {
border: 1px solid #ddd;
border-collapse: collapse;
bottom: 0;
left: 0;
position: absolute;
right: 300px;
top: 0;
background:#ddd;
}
.left_panel .slide-frame::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.left_panel .slide-frame{
height: 100%;
text-align: center;
width: 100%;
}
.left_panel .slide-frame img {
display: inline-block;
height: auto;
max-height: 100%;
max-width: 100%;
vertical-align: middle;
width: auto;
}
The reason for this behaviour is, that the :after element is an inline element. That causes a little gap between the image and that element. With setting the fon-size to zero, you remove that gap:
.left_panel {
font-size: 0;
}
Good article about that topic on CSS-Tricks. This solution is preferable, because you aren't using text. With text, there are other approaches to remove the space between inline elements.
Please check this for vertical and horizontal div without using height. https://jsfiddle.net/hardyrajput/myuqm5x8/2/
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 50%;
padding: 20px;
color: white;
text-align: center;
}
use this
.left_panel .slide-frame {
height: 100%;
text-align: center;
width: 100%;
display: inline-table;
}
just add display property
hello I have a problem with vertical-align: middle;
.wp{
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
width: 100%;
height: 20%;
background-color: red;
vertical-align: middle;
}
<div class="wp">
<div class="sub"></div>
</div>
I want to div witch has .sub class will be vertical center of .wp div. plz help me.
Sorry for my bad english.
As an alternative, you can use transform's translateY method, like
transform: translateY(-50%);
Works here: http://jsfiddle.net/r5z8gjgu/embedded/result/
vertivcal-align works with table-cell. look how it works in jsfiddle.
this is the html and css
<div class="table">
<div class="tableRow">
<div class="wp">
<div class="sub"></div>
</div>
</div>
</div>
.table {
display: table;
width: 100px;
}
.tableRow{
display: table-row;
height: 400px;
}
.wp {
display: table-cell;
background-color: tomato;
vertical-align: middle;
}
.sub {
height: 200px;
background-color: green;
}
also you can achieve this by "relative" and "absolute" positions
.wp{
position: relative;
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 20%;
background-color: red;
vertical-align: middle;
}
After looking at your questions I was curious and a quick google search gave me the following already from stackoverflow:
Vertically Aligning Divs
http://phrogz.net/css/vertical-align/index.html
http://jsfiddle.net/ktxpP/3/
In an attempt to not just provide a link answer:
The snippet below belongs to Lalit :
You can vertically align a div in other div. For this you must define css like this example on fiddle. Just see the small demo that vertically align a innerDiv in outerDiv.
HTML
My Vertical Div CSS
.outerDiv {
display: inline-flex; <== This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white; }
.innerDiv {
margin: auto 5px; <== This is responsible for vertical alignment
background-color: green; } .innerDiv class margin must be as margin: auto *px;
[* can be your desired value.]
display: inline-flex property is supported in latest(updated/current
versions) browsers with HTML5 support.
Always try to define height of vertically align div (i.e. innerDiv)
for any further compatibility issue.
.wp{
width: 100px;
height: 500px;
background-color: #000000;
display:inline-flex; <--
}
.sub{
width: 100%;
height: 20%;
background-color: red;
margin:auto; <--
}
<div class="wp">
<div class="sub"></div>
</div>
If I understand you correctly, you want something like this
.wp{
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
position:absolute;
top: 250px;
width: 100px;
height: 20%;
background-color: red;
vertical-align: middle;
}
<div class="wp">
<div class="sub"></div>
</div>
Hope that helps.
this is my solution try this
<html>
<head>
<style>
.wp{
width: 10%;
height: 10%;
float: left;
background-color: green;
border: 1px solid #00FF 00;
margin: 0.5%;
position: relative;
}
.sub
{
width: 50%;
height: 50%;
background-color: red;
position: absolute;
}
.center{
margin: 0 auto;
left: 25%;
}
.right{
left: 50%;
}
.middle {
top: 25%;
}
.bottom {
top: 50%;
}
</style>
</head>
<body>
<div class="wp">
<div class="sub center middle"></div>
</div>
</body>
</html>
So basically I need to center (vertically) text, but the height is variable, since it can be on multiple lines, how can I do this?
What I've tried:
.box {
text-align: center;
vertical-align: center;
}
.box {
position: absolute;
top: 50%;
text-align: center;
left: 50%;
}
.box {
margin: 50% auto;
text-align: center;
}
I don't know if this is even possible or if I have to correct it with JS.
Use display:table-cell
.box {
text-align: center;
vertical-align: middle;
background:black;
color:white;
height:200px;
display:table-cell;
width:450px
}
DEMO - Single line
DEMO - Multi line
Here you go, works vertically and horizontally.
HTML:
<div class="area">
<div class="bubble">
<p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p>
</div>
</div>
CSS:
.area {
width: 300px;
height: 300px;
background: url(../images/abe-bg.png) no-repeat;
position: relative;
}
.bubble {
position: absolute;
left: 93px;
top: 21px;
width: 135px;
height: 84px;
display: table;
}
.bubble p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
DEMO