Please do not mark this as a duplicate as i have got all of the correct code (as far as i can see) in and i think something is somehow over riding it. Used Chrome Inspector but it isnt picking up any problems.
I am trying to vertically align the text in the boxes (i dont want to id them all separately and pad them as if the text needs updated then so will the css).
Here is the code:
CSS:
.draggable{
color: #ffffff;
background-color:#EE3C96;
display:table-cell;
vertical-align:middle;
font-size:12px;
font-weight:bold;
text-align: center;
width: 90px;
height:90px;
float: left;
margin-left: 10px;
padding: 5px;
}
HTML:
<div class="draggable">
Lost time - employee absence
</div>
<div class="draggable2">
"Safe Place" to work
</div>
<div class="draggable">
Lost resources - employees leaving
</div>
<div class="draggable">
Financial penalties
</div>
And here it is on Codepen:
http://codepen.io/lbarnes/pen/vkrib
draggable and draggable2 are essentially the same (need them separate as it is used in the jQuery :)
Thanks in advance, hopefully someone can find something as i have tried everything lol!!
I recommend you to use the double span tip to vertically align your multiline text.
First, a simple exemple
And now, adapted to your needs :
<div class="draggable">
<span><span>
Lost time - employee absence
</span></span>
</div>
<div class="draggable2">
<span><span>
"Safe Place" to work
</span></span>
</div>
You can keep your current HTML markup, and add these spans via jQuery (I won't recommend it) :
$('.draggable, .draggable2').contents().wrap('<span><span></span></span>');
Then, add this CSS to get your vertical alignment :
/* Vertical align */
.draggable, .draggable2 {
display: block;
width: 90px; height: 90px;
line-height: 90px;
}
.draggable>span, .draggable2>span {
display: inline-block;
vertical-align: middle;
line-height: 0;
}
.draggable>span>span, .draggable2>span>span {
line-height: 20px;
}
Your CodePen forked
You can put the text in the box between <p></p> tag than add in your css the following lines:
.draggable p {vertical-align: middle;}
.draggable2 p {vertical-align: middle;}
You can add the following code to the draggable classes to solve the issue.Remove the display:table-cell
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
This would center the text inside the div both horizontally and vertically
This works for webkit browsers.For Mozilla
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
and IE
display:-ms-box;
-ms-box-pack:center;
-ms-box-align:center;
More info on browser support
Related
I'd like to force the text of a really long word to stay on the same line as my image. I know the word will need to wrap but I'd like the first line to stay aligned with the image instead of the first line jumping to the line after the image. My layout needs to be dynamic so setting a static width or height for the text is out of the question. Here's my code:
HTML:
<img class='inline-img' src='design/dislike.png'/>
<p class='inline-text'>LotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftext</p>
CSS:
img.inline-img { height: 24px; width: 24px; margin-right: 4px; float:left; }
p.inline-text { color:#F00; word-wrap:break-word; display: inline;}
Fiddle: http://jsfiddle.net/JvFAw/
UPDATE: I may put the image in the background of a parent DIV and use a margin to offset the text from the image unless somebody can suggest something more elegant
UPDATE2: Made a real world example as recommended by paulie_d
http://jsfiddle.net/JvFAw/4/
The pseudo-class "first-line" and "white-space" property might be what your looking for.
p:first-line {
white-space: nowrap;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
For lack of a more elegant solution, I think I'll do this:
HTML:
<div class="container">
<p class='inline-text'>antidisestablishmentarianismism</p>
</div>
CSS:
div.container {
max-width: 211.5px;
background: url(http://www.geoengineer.org/templates/rt_voxel/images/icons/icon-home.png) no-repeat left top;
padding-left: 20px;
}
p.inline-text {
color:#F00;
word-wrap:break-word;
font-size: 18px;
}
Fiddle: http://jsfiddle.net/JvFAw/7/
Been trying to work this out for a few hours now to no avail....I really want a bullet list that will work responsively (al browser width) that looks like this...
Basically the whole thing needs to center, you can center text but not the span with the bullet image :-(
I would obviously 'like' to use a UL/LI. But even without doing it I just cannout fathom how to do it. I haven't even addressed the novices/entrepreneurs bit at the end, assume I can overlay an image? Anyway any advice appreciated. I really need it to scale down for a responsive design too if possible...
EDIT :
I have tried I tried floating, in-lining, offsetting, using a grid system, nothing.... :-(
EDIT 2:
At the request of nathan I will post one of my solutions...
<div class="section group">
<div class="col span_1_of_2">
<p style="float:right;" class="darkGrey">
<span class="sprite step2"></span>
</p>
</div>
<div class="col span_1_of_2">
<h3 class="darkGrey">We then seek to place the you in our network of organizations who actively recruit developers.</h3>
</div>
</div>
^ the above just shoves my tick all the way to the right.....
EDIT 3
I just tried this using an image http://jsfiddle.net/fSSeK/ and it worked however my bullet point is a sprite background image and it doesnt work!
The exact technique is dependent on exactly what kind of bullet you want to show, but for classic bullets here is an easy way to do it.
You need to remove the bullet from the browser's built-in styles with list-style-type: none, then center the text in the list elements horizontally and use the :before pseudo-element to insert a bullet before their content. This bullet will be centered.
Sample CSS:
ul {
list-style-type: none;
}
li {
text-align: center;
}
li:before {
content: "• "
}
See it in action.
Use pseudo-element with background image
For a typical list:
<ul>
<li>The first line</li>
<li>The Second line which is longer</li>
</ul>
and use the following CSS:
ul {
text-align: center;
}
ul li {
border: 1px dotted blue;
display: block;
position: relative;
}
ul li:before {
content: "";
background: url(http://placehold.it/20x20) left top no-repeat;
width: 20px;
height: 20px;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
See fiddle demo: http://jsfiddle.net/audetwebdesign/S2Mvn/
You can use absolute or relative positioning on the li:before element if you need more precise alignment.
Just a simple image that uses some jQuery to fade some content over the top when moused over.
Only problem is that when the hover over takes effect, the hover spills into the div gutter making the hover over bigger than the actual container.
each image is layed out like so
<li class="large-4 columns item">
<div class="description"><h1>Image hover</h1></div>
<img class="display" src="http://placehold.it/400x300">
</li>
Can see a live example here.
http://jsfiddle.net/QLUMH/
Any ideas on ways to fix/improve what I am doing here? Cheers
Demo
Here you have live example,
you are giving 100% to width and height.
so that really goes overflow.
Code edited-
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
The issue is that your description fills the entire column, which is wider than your image. If you add an "inner column"/container that collapse to the same width as your image, it will work alright. I've created a fork of your demo that demonstrates this.
I've added a wrapper "ib" (Just stands for inner block. rename this to a proper name) inside each .column.item like so:
<div class="ib">
<div class="description">
<h1>Image hover</h1>
</div>
<img class="display" src="http://placehold.it/400x300">
</div>
And then just created a very simple CSS rule for making this wrapper collapse to its contents:
.ib {
display: inline-block;
position: relative;
}
You did not style your li. The issue is that in foundation.css it is getting padding-left and padding-right. You need to remove that and use margin-left and margin-right instead. And you also need to fix the width of the li. As .description will get its 100% height. So you need to include a small css in your own file (don not modify foundation.css).
#portfolio li.columns{
/* You can use the width in '%' if you want to make the design fluid */
width: 400px;
padding: 0px;
margin: 0px 0.9375em;
}
Fiddle
You'll just have to get rid of the padding on tne li
li{ padding:0 }
or use the the box-sizing property:
`li { box-sizing:border-box; -moz-box-sizing:border-box; }
Change in CSs will help,
I have updated the same in fiddle
with change in CSS,
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
#portfolio .description h1 {
color: white;
opacity: 1;
font-size: 1.4em;
text-transform: uppercase;
text-align: center;
margin-top: 20%;
width:400px;
height:300px;
overflow:hidden;
}
Update:
If the H1 created extra cutter and wrapping issue(for some), please use the DIV tag instead, which should work fine!
I hope this will solve your problem :)
you probably see this question a lot. However, I've been through threads and I can't seem to find a solution to my situation. It's probably something very minute that I'm missing, or perhaps I'm just barking up the wrong tree all together.
Basically what I'm trying to do is take an anchor with a {display:block;} with a set height and width and have its text be vertically and horizontally centered.
Right now this is my css
.logo
{
width:140px;
height:75px;
border-right:1px dotted black;
border-bottom:1px dotted black;
float:left;
text-align:center;
font-size:15px;
font-weight:bold;
color:#c60606;
}
.logo a
{
display:block;
width:140px;
height:75px;
background-color:#fff;
font-size:15px;
font-weight:bold;
color:#c60606;
}
/*the reason for the double declaration of text information is because
some of the logo divs do not have anchors in them, and it's for uniformity
purposes.
*/
.logo a div
{
margin-top:10px;
}
and then the html would be
<div class="logo"><div>my link</div></div>
Now the reason i stuck a div inside of the anchor is because I thought it would be a good way to separate the text from the actual block, but with that margin setting it moves the anchor down instead of just the text. The vertical-align attribute does basically nothing, and I'm at a loss in terms of what to do. Any suggestions or restructuring ideas would be great. Thank you.
a sample can be found at http://www.dsi-usa.com/test/clientele.php feel free to browse the site it's still a work in progress a lot has to be organized and re-coded. Anyhow, that sample is exactly what I want, just need the text to be vertically aligned as well.
If you set your line-height of the containing box (your anchor -- just ditch the inner div, you don't need it) equal to its height, then a single line of text will be vertically centered. If you require line-wrapping, it gets more complicated.
Here's a fiddle with just one anchor element to demonstrate the simpler scenario: http://jsfiddle.net/vdkAb/1/
UPDATE
...and if you don't need to worry about IE6/7 support (lucky you!), then you can use display:table-cell, and it works effortlessly -- without specifying line-height -- even with multiple lines, like this: http://jsfiddle.net/PH5Yw/
You can't have a <div> inside an <a>, it's invalid HTML. Use a <span> set to display: block; instead.
Update:
As of HTML5, you can now have a div inside an anchor (or any block level element.)
For this to be legal though, you must use the HTML5 doctype:
<!DOCTYPE html>
This usually works for me
$(function(){
$("button").click(function(){
$(".navbar").toggleClass("large");
});
});
*{
box-sizing: border-box;
}
.navbar{
display: flex;
color: white;
background: black;
height: 30px;
margin-bottom: 10px;
transition: all 0.25s ease;
}
.navbar.large{
height: 120px;
}
a{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 20px;
padding: 0 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<a>TITLE</a>
<a>Contact</a>
<a>About Us</a>
</div>
<button>Change Nav Size</button>
Just thought I should put this out there :)
Works only when the link container is display: flex
I have a single line of text that looks like this:
GIVE US A CALL AT ###.###.###
I want the phone number to be significantly bigger than the text and I want it all bottom aligned within the div.
I can't seem to get this to work... what I am missing?
Current HTML:
<div class="accessSlogan">
<div class="access-slogan-text">GIVE US A CALL AT </div>
<div class="access-slogan-number">###.###.###</div>
</div>
Current CSS:
.accessSlogan{
position: relative;
float: right;
display: inline;
}
.access-slogan-text {
display:inline;
font-size: 1.2em;
line-height: 2em;
padding-right: 6px;
vertical-align: text-bottom;
}
.access-slogan-number{
position: relative;
float: right;
display:inline;
font-size: 1.8em;
line-height: 2em;
vertical-align: text-bottom;
}
Use the <strong> tag and style accordingly.
<div class="accessSlogan">
GIVE US A CALL AT <strong>###.###.###</strong>
</div>
CSS:
.accessSlogan{
float: right;
}
.accessSlogan strong {
font-size: 1.8em;
position:relative;
bottom:0.4em;
}
The point is to use the existing "semantic" HTML to work with you and avoiding over-complicating things. The <strong> tag is what you mean, so use it:-)
The relative position of the strong text will need to be adjusted to align perfectly. 0.4em is a starting point (half of the extra height), but it depends upon the size of the accessSlogan text.
Both your markup and CSS seem over-complicated, although without knowing where this is to be positioned on a page it's hard to know if that's necessary or not.
At it's simplest this will achieve it:
.access-slogan {
float: right;
text-transform: uppercase;
}
.access-slogan .access-slogan-number {
font-size: 1.8em;
}
<p class="access-slogan">Give us a call at <span class="access-slogan-number>###.###.###</span></p>
Note that you can't apply float and display:inline to an element since float applies display:block along with it's own document flow rules. You'll also note I've uppercased the text in CSS rather than in the source HTML, since this is a display artefact.
I think there is a much more minimal set of CSS you can use for this. Is this demo here what you were after?
use <span> instead of <div>. It will solve your problem
<div>
call me at <span>0000-000</span>
</div>
or
<div>
<span>call me at</span><span>0000-000</span>
</div>