I'm wondering if there's a way to create a perfect square using display: inline-block The reason is that I want to place it right next to a text e.g.
.legend {
display: inline-block;
color: rgba(0, 0, 0, 0);
width: 1em;
background-color: lightblue;
}
<div>
<div class="legend">
d
</div>
<div style="display: inline-block">
Some legend
</div>
</div>
Right now it still looks kinda rectangular.
You can simply specify the div's height, too. Consider the following:
/* The container needs to be relatively positioned */
.container {
position: relative;
}
/* The legend is absolutely positioned, but in relation to its
* container.
* We also apply a common trick to place it at the vertical center of
* its parent: position the top bound at 50% of the parent's height.
* then transform the position to move it up by 50% of its own height.
*/
.legend {
display: inline-block;
color: rgba(0, 0, 0, 0);
width: 1em;
height: 1em;
background-color: lightblue;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* This div is decisive for the whole thing's height.
* Since the legend is positioned in an absolute way, we need to make
* room for it by moving this div to the right (margin-left)
*/
.legend-text {
margin-left: 1em;
padding: 5px;
display: inline-block;
}
<div class="container">
<div class="legend">
d
</div>
<div class="legend-text">
Some legend
</div>
</div>
Its very simple. add height to .legend
.legend {
display: inline-block;
color: rgba(0, 0, 0, 0);
width: 1em;
height: 1em;// just add this line
background-color: lightblue;
}
Related
I want to display the notification count inside a circle but I don't want it to have a fixed width so the circle can expand when there is a bigger number/text inside the circle.
.circle {
height: 20px;
width: 20px;
line-height: 20px;
border-radius: 50%;
background-color: red;
color: white;
text-align: center;
}
<div class="circle">5</div>
<br>
<div class="circle">102</div>
See this CSS only solution. Set the same value of min-width and min-height for 1 digit number. Use a pseudo element for vertical alignment and to maintain the square shape. With border-radius applies to the container for the circle.
.circle {
display: inline-block;
border-radius: 50%;
min-width: 20px;
min-height: 20px;
padding: 5px;
background: red;
color: white;
text-align: center;
line-height: 1;
box-sizing: content-box;
white-space: nowrap;
}
.circle:before {
content: "";
display: inline-block;
vertical-align: middle;
padding-top: 100%;
height: 0;
}
.circle span {
display: inline-block;
vertical-align: middle;
}
<div class="circle"><span>8</span></div>
<div class="circle"><span>64</span></div>
<div class="circle"><span>512</span></div>
<div class="circle"><span>4096</span></div>
This is so hacky, but it seems to check out on all the major browsers' latest versions, so I'll post it anyway. The basic principle is that percent-based padding (even top and bottom padding) are relative to the width of the parent. Setting it to 100% with a width and height of 0 would theoretically mean that the height of the element would always be equal to the width. Combine that with a pseudo element and you don't even need to change the markup. I used flexbox to correct the centering of the content. It seems to work on the browsers I tested it on, but this is definitely dependent on recent versions because it uses flexbox and display:table. I also had to add a min-width to ensure it doesn't appear out of shape for too little of content.
.circle {
background-color: red;
color: white;
text-align: center;
position: relative;
border-radius: 50%;
min-width: 1.25em;
display: inline-flex;
align-items: center;
justify-content: center;
}
.circle:after {
content: '';
padding-top: 100%;
display:table;
}
<div class="circle">5</div>
<br>
<div class="circle">102</div>
<br>
<div class="circle">4298347918</div>
Simple CSS for circles that works almost ever:
.circle {
position: relative;
border-radius: 50%;
width: 100%;
height: auto;
padding-top: 100%;
}
The trick is that the padding top is calculated on the width so you can use it for makinh height equals width
Try using border-radius:50% and set max-width and height
Here is a quick example where you can see how to dynamically maintain a circle with css and js.
As Jagjit Singh pointed out here, you can achieve a circle using border-radius: 50%; instead of a fixed-pixel value.
Here's the page I'm working on: http://en08-phx.stablehost.com/~news/test.html
This is the code I'm using to center the div:
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 70%;
height: auto;
padding: 20px;
background-color:rgba(255, 255, 255, 0.2);
color: white;
text-align: center;
border-radius:5px;
border:2px solid rgba(255, 255, 255, 0.5);
}
Whenever I decrease the width of my browser or use a mobile phone, the top of the page starts to get cut off.
I want the div to be centered regardless of the size of the browser width. However, if the browser's height is too small, I'd prefer to just add a margin of 10px to the top/bottom and make sure all the text shows.
What exactly am I doing wrong here?
The issue with this positioning technique (top 50% minus translateY -50%) is that it aligns itself based its own height. When the viewport squishes the container taller than the viewport it remains centered with the top and bottom getting cut off. If you're able to use flexbox I recommend flexbox (http://caniuse.com/#search=flex).
Wrap the container you want always centered in another container such as centered-wrapper and apply flexbox to center it:
.centered-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
The min-height is very important here. If your div doesn't stretch to the page's height it'll fill and center its child. If it is then it'll just keep expanding avoiding the scenario that you have as well. If you're box is relative in height to the whole page then you'll also need to set the height of your page for this to work:
html,
body {
height: 100%;
}
You don't need any centering done to your centered div, just the visual styles.
Here's a sample of it in action: https://jsfiddle.net/vfc9n7p2/
body {
display: flex;
flex-direction: column;
justify-content: center;
}
div {
/* position: absolute; */
/* left: 50%; */
/* top: 50%; */
/* transform: translate(-50%, -50%); */
width: 70%;
height: auto;
padding: 20px;
background-color: rgba(255, 255, 255, 0.2);
color: white;
text-align: center;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 auto;
}
this will work fine for you.
<br clear="all">
This has worked for me. Just put this before your content element like div.
Quick question here. I'm using a database and inserting an 'Image Name' on top of the image, as can be seen here:
Currently the padding of the Image Name is a number, however I want the padding to go until the border of the image. I tried doing 'Padding: right 250;', however clearly that won't work as the right padding starts at the end of the Image Name, which can be of varying length.
This made me start thinking that it needs to be Dynamic, and I am most certainly new to this. I've looked at various things online however can't seem to find similar things, which probably means I'm searching for the wrong thing. Anyway, any help woud be great.
Cheers,
Jake
**Current CSS (obviously lots more exists, but this is requried bit)- **
h3.imageName {
position: absolute; top: 278px; left: 10;
width: 100%;
z-index: 20;
}
h3.imageName span {
color: white;
font: bold 18px Helvetica, Sans-Serif;
background: rgba(0, 0, 0, 0.7);
padding: 8;
}
**Current HTML - **
<h3 class="imageName"><span><?php echo $row['name']; ?></span></h3>
You could just give the whole text area a width if the image container width does not change. Also consider using bottom: 0; rather than top:# in this instance too.
You're using a span which is a display:inline; element which means it's width is not auto or 100%. You've added a background colour to the span meaning the background doesn't stretch to the edges of the parent element. Put your background on the parent being your h3 element. You've already used width:100%; and if you want it in the bottom left corner you should try this:
h3{position:absolute;left:0;right:0;bottom:0;background:#000000;background:rgba(0,0,0,0.7);}
Also I see you're adding a padding and position of 10px. So you could use a margin like so
margin:0px 10px;
This will keep the h3 element 10px alway from either side of the parent element.
to keep it 10px away from the bottom. Add bottom:10px; or even margin-bottom:10px; to be consistent.
Also we don't really need any styles on the span itself as it's a child element of the h3. So just put your styles from the span the the h3 so all together
h3{position:absolute;left:0;right:0;bottom:0px;margin:10px;marign-top:0px;background:#000000;background:rgba(0,0,0,0.7);color:#FFFFFF;font-family:Helvetica,Sans-Serif;padding:8px;}
Also! Don't forget to add a position relative to h3's parent element!
`position:relative;`
It's not entirely clear how this is structured but an absolutely positioned element is positioned according to the edges of the closest non-static positioned ancestor.
Unfortunately, this includes borders and padding.
One option would be to wrap them image in another element and apply the border to that:
* {
box-sizing: border-box;
margin: 0;
}
body {
text-align: center;
}
.wrap {
margin: 1em;
display: inline-block;
}
.inner {
position: relative;
border: 10px solid pink;
}
img {
display: block;
}
.imageName {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 2;
text-align: left;
padding: 8px;
}
h3.imageName span {
color: white;
font: bold 18px Helvetica, Sans-Serif;
}
<div class="wrap">
<div class="inner">
<img src="http://lorempixel.com/400/200/sports/" alt="" />
<h3 class="imageName"><span>Image Title</span></h3>
</div>
</div>
As an alternative to the border...a box-shadow might be an option as this does not affect the size of the element.
* {
box-sizing: border-box;
margin: 0;
}
body {
text-align: center;
}
.wrap {
margin: 1em;
display: inline-block;
position: relative;
}
img {
display: block;
box-shadow: 0 0 0 10px pink;
}
.imageName {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 2;
text-align: left;
padding: 8px;
}
h3.imageName span {
color: white;
font: bold 18px Helvetica, Sans-Serif;
}
<div class="wrap">
<img src="http://lorempixel.com/400/200/sports/" alt="" />
<h3 class="imageName"><span>Image Title</span></h3>
</div>
I have a header: FIXED position.
Here is css:
#header{
position:fixed;
height: 6em;
display:block;
width: 100%;
background: rgba(255, 255, 255, 1);
z-index:9;
text-align:center;
color: #000000;
}
And inside, I want to center text middle and vertical middle.
Here is what I have so far, but it's not working. All example online shows with an absolute position as the container, but it's not working with the fixed one.
HTML:
<div id="header">
<div id="bandname">Bewolf Photography</div>
<div id="insta"><img src="imgs/insta.png" width="40" alt="tablets" /></div>
<div id="bandname">Bewolf Photography</div>
</div>
CSS for text and image:
#bandname
{
display: inline-block;
font-size: 2.8em;
padding: 0px 0px 0 0;
vertical-align: middle;
background: rgba(0, 255, 0, 1);
}
#insta {
display: inline-block;
padding: 0px 0px 0px 50px;
vertical-align: middle;
}
I just can't figure that one out...
I tried using
line-height: 6em;
Help would be appreciated.. .thanks
but that doesn't work either.
Use the pseudo element vertical centre trick.
#header:before brings the inline elements down to the centre. The direct children of header are given display: inline-block and vertical-align: middle to keep a straight line.
Read more about pseudo elements here.
This technique basically adds a "div" before the rest of your content. (It can be replaced with a real <div> if you really need this to work in IE7 and below. [Don't bother!] ). It basically looks like this:
<div class="header">
<!-- added by css -->
<div>I am :before and you will all do as I say! To the middle, plebs!</div>
<!-- end css content -->
<div>Yes master!</div>
<div>Anything you say sir!</div>
</div>
Working Example
Note: I removed the div from around the image. It seems unnecessary, but can be placed back in if needs must. Also, I have targeted only the direct children of #header using the direct children selector: >. Here is a huge list of CSS selectors.
#header {
position: fixed;
height: 6em;
display: block;
width: 100%;
background: rgb(0, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(0, 255, 255, 1);
z-index: 9;
text-align: center;
color: #000000;
top: 0px;
}
#header:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
#header > div,
#header > img {
display: inline-block;
font-size: 2.8em;
padding: 0px 0px 0 0;
vertical-align: middle;
}
<div id="header">
<div id="bandname">Test</div>
<img src="http://www.placehold.it/50" width="40" alt="tablets" />
<div id="bandname">test</div>
</div>
The easiest solution is to have the following css for it's content.
#header .wrapper
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Since there are multiple children, it's better to wrap them around a wrapper div. Here's the working example:
http://jsfiddle.net/zf987w0b/1/
You can use the properties left, right, top and bottom, set em to 50% for example, and them use the transform property to translate the element -50% of itself to perfectly center it. Sounds confuse but i made a fiddle: http://jsfiddle.net/zzztfkwu/ Will this work?
EDIT: http://jsfiddle.net/kbh97n82/1 updated fiddle with .wrapper solution.
A fairly standard way to horizontally centre a DIV is to set the left and right margins to auto.
However, I have a DIV that I want to be mostly horizontally centred, but I want to nudge it a little toward the left.
I tried setting the margins like so:
margin: 100px 60% 24px 40%;
... and also like this:
margin: 100px 40% 24px 60%;
... but both resulted in the DIV being positioned further to the right.
I tried adding padding to the DIV, but that also only moves it to the right.
In short, it seems no matter what I do, the DIV moves to the right, not to the left as desired.
How do I nudge a DIV a little to the left of centre?
A different way of handling this is making a parent wrapper div. Where you set that to auto so that parent is centered, but the child div is then starts at the center but moves to the right. See fiddle http://jsfiddle.net/4H26W/1/
html
<div id="red">
<div id="blue">Some text</div>
</div>
css
#red {
width: 1px; /* you could actually just change it to 0px */
margin: 100px auto;
background: red;
}
#blue {
width: 200px;
background: blue;
}
Then if you wanted to further optimize the position of the child div, you could just add some left styles to it
position: relative; /* has to be position relative for left to work, or you could just do margin-left: -50px; too */
left: -50px;
http://jsfiddle.net/4H26W/2/
Since you tagged css3 for your question so you can use it :
margin: auto;
-webkit-transform: translateX(10px); /* 10px to left */
-moz-transform: translateX(10px); /* 10px to left */
-ms-transform: translateX(10px); /* 10px to left */
transform: translateX(10px); /* 10px to left */
Turns out I was able to do what I needed to do with floating the DIVs.
.left,
.right {
display: block;
position: relative;
margin-bottom: 2em;
clear: both;
}
.left {
float: left;
margin-left: 20px;
}
.right {
float: right;
margin-right: 20px;
}
there is an option with text-align, display and negative margin .
DEMO
HTML test base :
<div class="left">center on my left</div>
<hr/>
<div class="right">center on my right</div>
<hr/>
<div >center me</div>
CSS base:
body {
text-align:center;
background:linear-gradient(to right,gray 50%,white 50%)
}
div {
width:20%;/* whatever */
display:inline-block;
border:solid;
}
.left {
margin-left:-20%;/* whatever */
}
.right {
margin-right:-20%;/* whatever */
}
If you set the margin-right or margin-left as a separate rule after setting the margin rule, you'll still get frustrated, but not as much:
<div id="first"></div>
<div id="second"></div>
div {
height: 100px;
width: 100px;
border: 1px solid red;
margin: 2em auto;
}
#second {
margin-right: 42%;
}
See example fiddle: http://jsfiddle.net/Q7EHX/
position relative.
<div style="margin:100px auto 24px;
position:relative;left:-30px;
border:1px solid red;width:200px
">should be a little off-center</div>