I haver the following code:
<td class="mobile-user-icon">
<span class="mobile-photo">background text</span>
<span class="mobile-caller-mute">overlay text</span>
</td>
.mobile-user-icon {
width: 64px;
height: 64px;
text-align: center;
background: grey;
color: white;
vertical-align:middle;
}
I want to overlay mobile-caller on mobile-photo, whilst maintaining vertical-align:middle for the 2 text elements.
I know if this wasn't in a table, the usual way to do this is to set the parent mobile-user-icon to position:relative, and then position:absolute both child elements with the same absolute position.
However, this does not work in a table-cell. Any ideas?
JS Fiddle: http://jsfiddle.net/mFNed/1/
You should add a relative position to .mobile-user-icon:
.mobile-user-icon {
width: 64px;
height: 64px;
text-align: center;
background: grey;
color: white;
vertical-align: middle;
position: relative;
}
Since you have a fixed height for the table cell, you can easily use the CSS line-height option to maintain vertical alignment. Set the following CSS for the <span> elements inside .mobile-user-icon:
.mobile-user-icon > span {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
vertical-align: middle;
line-height: 64px;
}
jsFiddle Demo
Adding a float:left style to your cells should work.
check the following link I have updated your fiddle.
http://jsfiddle.net/mFNed/5/
.mobile-caller-mute {
float:left;
}
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.
I'm having real trouble understanding something in CSS which to my mind ought to be simple. I want to change the contents of a div of size 50x50 pixels from an image to text content using jquery. The contents swap fine, but the position of the div gets messed up and I just don't see why.
EDIT: By messed up I mean when I inspect the element, a div of the correct size is highlighted, but the text sits outside of the highlighted box and the lower elements are displaced.
$('.cross').html('?');
#island{
margin: 20px auto;
border-radius:10px;
height: 500px;
width: 500px;
background: url('../images/island-500x500.png')
}
#crosses{
line-height: 0;
position: relative;
top: 50px;
left: 50px;
}
.crosses-row{
}
.cross{
display: inline-block;
width: 50px;
height: 50px;
}
I've made a fiddle here.
Here is the working fiddle
https://jsfiddle.net/6zkLvLeg/1/
Add the following code to ur .cross
.cross {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
vertical-align: top;
text-align: center;
}
Add vertical-align: top; to css class cross and remove line-height: 0px; from #crosses
Demo
.subject_container
{
width: 200px;
height: 250px;
border: 1px solid #eee;
display: table-cell;
}
.subject
{
border-radius: 50%;
border: 1px solid #653;
width: 175px;
height: 175px;
margin: auto;
margin-top: 25%;
position: relative;
}
.subject div
{
text-align: center;
}
I can understand that my content AB DE VILLIERS/IKER CASSILAS are inside .subject div only. But i am using border-radius:50% to make my div a circular. How can i fit my content inside my circular div? i want solutions to work even if i change the size of my div.
Any suggestions?
You need to add line-height to the .subject and set it to the same width and height of your .subject. Then you need to wrap your content inside your .subject with another div. Then apply the following CSS to it:
.subject_wrapper
{
line-height: normal;
display: inline-block;
vertical-align: middle;
}
jsFiddle Example: here
EDIT: If you want the font-size to change if the text tries to overflow, you need to use JavaScript.
Example post on how to do this: Auto-size dynamic text to fill fixed size container
EDIT 2: If you just want overflow: hidden; applied to anything outside of the circle just add overflow: hidden; to the .subject.
Example: http://jsfiddle.net/trLhdj4e/3/
Try This:
.subject div
{
text-align: center;
position:relative;
top:50%;
}
You need wrap subject_name and subject_completion in a new div. So, apply absolute center to this div. For that, add follow styles to new div:
.wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
Also, you should declarate height and width for .wrapper if you need it.
Try this approach:
.subject div
{
display: table-cell;
text-align: center;
vertical-align:middle;
height: 175px;
}
Demo
With overflow:hidden;
Demo
I am having an issue with positioning text inside a div. I want the image on the right top corner (which I was able to do) and the text kind of center the bottom text in the box.
This is an example of what I want to do: http://jsfiddle.net/Lucky500/Nq769/
I created a div .bottom_box and added:
.bottom_box {
position: relative;
bottom: -50px;
left: 50px;
}
Is there an easier or more correct way to do this?
Alright -
Added text-align:center to your and elements.
Set your outer_box position to relative.
Set the img value to absolute and positioned with 0.25 em top and right instead of margin.
http://jsfiddle.net/mr_mayers/Nq769/2/
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: .5em;
Position: relative;
}
.bottom_box {
position: relative;
bottom: -50px;
}
p {
color: blue;
text-align: center;
}
img {
position: absolute;
padding: 3px;
top: 0.25em;
right: 0.25em;
}
h1 {
text-align: center;
color: red;
}
You can achieve your layout as follows:
For this HTML:
<div class="outer_box">
<img src="http://placehold.it/100x50">
<div class="bottom_box">
<h1>$25 OFF</h1>
<p>$25 off your first cleaning!</p>
</div>
</div>
Try the following CSS:
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: 0.5em;
}
.bottom_box {
clear: both;
border: 1px dotted gray; /* for demo only, optional */
}
img {
float: right;
padding: 3px;
margin: 0 0 1em 1em;
}
p {
color: blue;
margin-left: 50px;
}
h1 {
color: red;
margin-left: 50px;
}
Since your image is floated, simply clear the .bottom-box.
Use margin-left on the child elements to get any white space.
See sample: http://jsfiddle.net/audetwebdesign/3SjRG/
You can use text-align: center if you are centering the p and h1 content, but I was not sure if you wanted ragged left or ragged right alignment on the text block;
You'd be better off using text-align:center and position: absolute
See example
There are some solutions.
An other way is to make the box relative and positioning the text and image inside absolute.
I would create a container div with a border for your box, then set the inner divs (one with your image and one with your text) to position absolute. then you can use top:0; right:0; for the picture on the right corner. then bottom:xx; and left:yy; for positioning the text div.
This is just a different method than you used. If it works, doesn't break in any situation, and is simple, then it's correct. Many ways to skin a cat in programming.
I have fixed height divs that contain text in them. I would like the text to be vertically aligned in the middle of the div, but the problem lies in the fact that some of the text is single-line, and some splits itself over onto two lines. For IE8, Chrome and Firefox, using display: table-cell and vertical-align: middle provides the solution I need:
JS Fiddle is here. Take the asterisk off the width: 300px to see the formatting when the text is on one line.
However, IE7 does not support the display: table-cell property. The only solutions I have found to this apply only to single lines, and not to text that may be 1 or 2 lines. How can I have it display in IE7 as it does in more modern browsers, without the use of any scripts?
How about an IE7 CSS call putting position:relative on the div, and absolute on the h6, and keep the code for vertical-align for modern browsers.
http://jsfiddle.net/yap59cn3/
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
ie7.css
div
{
/* Use inheritance, and override only the declarations needed. */
position:relative;
}
h6
{
height:auto; /* override inherited css */
position:absolute;
top:45%;
}
The goal is to make IE7 "presentable" -- no matter what you do, it will never look as pretty as a modern browser. To me, it's not worth the headache (not even a little).
Personally I've started to (ab)use padding to get vertical aligns. It's especially handy if you use fixed height, since you can offset the height with the value of the padding to get a perfect full-height element.
Note: This solution only works if you know what text will come in the <h6> in advance. If you dynamically add it, I'd suggest wordcounting to try to figure out if it's gonna wrap or not.
Solution:
HTML
<div>
<h6 class="OneLineVertCentered">Here is some text. Look at this lovely text. Isn't it nice?</h6>
</div>
<div style="margin-top: 1em;"> <!-- Margin only for displaying the boxes properly -->
<h6 class="TwoLineVertCentered">Here is some text. Look at this <br />
lovely two-line text. Isn't it nice?</h6>
</div>
CSS
div {
background-color: yellow;
height: 30px;
width: 200px;
width: 300px;
}
h6.OneLineVertCentered,
h6.TwoLineVertCentered {
font-size: 12px;
line-height: 1em;
}
h6.OneLineVertCentered {
padding-top: 10px;
}
h6.TwoLineVertCentered {
padding-top: 3px;
}
Fiddle:
http://jsfiddle.net/Snorbuckle/CnmKN/
Snippet (same as fiddle):
div {
background-color: yellow;
height: 30px;
width: 200px;
width: 300px;
}
h6.OneLineVertCentered,
h6.TwoLineVertCentered {
font-size: 12px;
line-height: 1em;
}
h6.OneLineVertCentered {
padding-top: 10px;
}
h6.TwoLineVertCentered {
padding-top: 3px;
}
<div>
<h6 class="OneLineVertCentered">Here is some text.
Look at this lovely text. Isn't it nice?</h6>
</div>
<div style="margin-top: 1em;">
<h6 class="TwoLineVertCentered">Here is some text. Look at this <br />
lovely two-line text. Isn't it nice?</h6>
</div>
You can use a helper span element to vertical align your text like the following example:
html
<div class="container">
<span class="aligner"></span>
<h3>Text to be aligned center in the beloved ie7</h3>
</div>
css
div.container {
background-color: #000;
color: #fff;
height: 300px;
width: 250px;
position:relative;
margin:12px auto;
text-align:center;
}
.aligner {
display: inline-block;
height: 100%;
content: ' ';
margin-right: -0.25em;
vertical-align: middle;
}
h3 {
display: inline-block;
vertical-align: middle;
}
Fiddle: http://jsfiddle.net/groumisg/dbx4rr0f/
Normally, we would use a pseudo element for this, but ie7 (what a surprise!) does not support :after, :before...etc. Also, note that ie7 does not support display: inline-block for elements that are not inline by default, like div. To use display: inline-block for a div you would have to use the following hack:
div {
display: inline-block;
*display: inline;
zoom: 1;
}
as suggested here Inline block doesn't work in internet explorer 7, 6
You should be able to accomplish this with line-height and vertical-align: middle;.
div {
background-color: yellow;
height: 30px;
line-height: 30px;
width: 200px;
*width: 300px;
}
h6 {
font-size: 12px;
line-height: 1em;
height: 30px;
vertical-align: middle;
}
check this out
http://jsfiddle.net/CnmKN/59/
CSS Code
div {
background-color: yellow;
height: 30px;
width: 200px;
*width: 300px;
display:table;
}
h6 {
font-size: 12px;
line-height: 1em;
display: table-cell;
vertical-align: middle;
height:90px;
}
I know two other methods to vertically center elements than with table-cell:
1) With line-height:
.element {
height: 60px;
line-height: 60px
}
This will only work if the text is in a single line.
2) position absolute/margin auto
.parentElement {
position: relative;
}
.element {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
You maybe will have to use height (auto or a value) and display inline/inline-block. Just try.
Key point is not to use pixels for alignment, use only %-s.
Works even on IE5 :)
here is Demo
.wrapper{
position: relative;
width: 100%;
height: 200px; /* change this value to see alignment*/
background-color: red;
margin: 0 auto;
}
.cell{
position: absolute;
display:block;
background-color: blue;
left:50%;
top:50%; /*this puches element half down*/
margin-left:-100px; /* this is the half size of cell width:200px;*/
margin-top: -.5em; /*this is the half size of font size*/
width: 200px;
color: #fff;
text-align:center;
}
<div class='wrapper'>
<div class='cell'>vertically aligned text</div>
</div>
div {
background-color: yellow;
height: 400px;
width: 200px;
display: table-cell;
vertical-align: middle;
width: 300px;
}
h6 {
font-size: 12px;
line-height: 1em;
height: 30px;
}