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
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/
I've been having a problem with these boxes. The thing is that I need to make the text align always in the middle of the box + image no matter how many lines it has.
Have a look at the example bellow, many thanks:
HTML (I'm using 960 grid)
<div class="grid_4 prod-box-small alpha">
<h5>Shampoos</h5>
<div class="prod-img-box-small"><img src="images/product_small_1.jpg" alt="" /></div>
</div>
CSS
.prod-box-small {
border:1px solid #e4e4e4;
min-height:115px;
padding-right:12px;
padding-left:20px;
margin-bottom:20px
}
.prod-box-small h5 {
color:#820c8e;
float:left;
font-weight:600;
max-width:100px;
padding-top:42px;
padding-bottom:22px
}
.prod-img-box-small {
width:100%;
display: block;
padding:0;
max-height:105px;
margin-right: 0;
text-align: right;
line-height: 115px;
}
.prod-img-box-small img {
max-width:100%;
max-height:100%;
vertical-align: middle
}
Format the h5 using display:inline-block, so vertical-align can work on it, and give it a width - like this: http://jsfiddle.net/Cds5q/
(h5 and img elements are written without any whitespace between the tags here, otherwise you will get the width of a space character between them, and then they won’t fit into the div element exactly.)
stripped down to the important parts of the code: http://jsfiddle.net/aETC4/
you can use display: table for this. With vertical-align: middle your headline will be arranged centered inside the imaginary cell
simplest way us use margin-left: and margin right in percentage. you can check percentage value by debugger tool.
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 :)
I'm trying to underline a h1-title, but for some reason it always takes the whole length of the parent div. The only way I was able to do so, was by adding the position: absolute-property in the css...
This is the design:
And this is what I get:
Point is to get the blue line only as wide as the h1 and a gray border line under the parent div.
HTML:
<div class="title">
<h1>Contacteer ons</h1>
</div>
CSS:
h1 {
border-bottom: 8px solid #57c4d0;
position: absolute; /* As I've said, adding this allowed me to do so, but the result was far from ideal! */
}
.title {
border-bottom: 1px solid #dedede;
}
I'm planning on using the HTML across my whole website (each h1 will be different in length, adding a fixed width on each title isn't an option), so I'm looking for a robust solution. Anyone with advice?
You can change h1 to display: inline-block;
See a live example at (added margin-bottom to .title for clarity):
http://jsfiddle.net/P4BGC/
See this fiddle. H1 is a a block element, so it grows to fill its parent. You can set display: inline, but I also suggest to put it in its own div (or any other element with display: block) so you ensure that no content goes along side.
<div><h1>Hello, world</h1></div>
Lorem ipsum
the css
h1 {
border-bottom: 3px solid red;
display: inline;
}
You could also use CSS style text-decoration.
html:
<div><h1>Hello, world</h1></div>
css:
h1 {
text-decoration: underline;
}
I am trying to vertically align a SPAN element in the middle of a parent element.
This is what I am doing:
I am trying to get both the username and password labels to be vertically aligned (middle) with the input boxes.
This is my HTML code:
<div class="login_field_wrap">
<span>Username</span>
<input type="text" autocomplete="off" spellcheck="off" id="username" name="username">
<div class="clear"></div>
</div>
This is what I have tried:
.clear { clear:both; }
.login_field_wrap span {
float:left; vertical-align:middle; font-size:13px; color:#333; font-weight:bold; }
.login_field_wrap input {
float:right; vertical-align:middle; padding:8px 5px; border:solid 1px #AAA;
margin:0px; width:250px; }
Vertically aligning an image element inside of this wrapping DIV works absolutely fine, well in Chrome anyway, it just won't align with my SPAN!
Any help would be amazing.
Vertical aligning via CSS can be tricky, and while CSS3 brings about a slew of goodies to help with that, CSS3 support is lackluster in the current browser market.
To achieve this effect I set the line-height property of the child element equal to the height of its containing element.
For example, I would use the following CSS:
.login_field_wrap { height:30px; /* or whatever is appropriate for your design */
.login_field_wrap span { height:30px; line-height:30px; }
.login_field_wrap input { height:30px; line-height:30px; }
The only downside of using line-height to vertically align something is if the text overflows onto a second line, in which case your design will essentially break.
Just remove the float property from your span class and set it to display:inline-block and the vertical-align:middle property will work, like so:
.login_field_wrap span {
color: #333333;
display: inline-block;
font-size: 13px;
font-weight: bold;
text-align: left;
vertical-align: middle;
}
Edit: cleaned up your code a bit, here is a demo that should work across browsers.
http://jsfiddle.net/kUe3Y/
I found the easiest way to do this is to set the parent container display property to table and the child display property to table-cell
#parent{
display:table;
}
#child{
display:table-cell;
vertical-align:middle;
}
I was able to get this to vertically align an anchor element inside a div.
I put it into the terms of your question in this jsFiddle.
I have never been able to get vertical-align to work in anything other than <td>s.
A workaround I commonly use would be to define a height for .login_field_wrap, then set the line-height property in your <span> to be equal to .login_field_wrap's height.
I think text-align:center; should work on elements too. If I am not mistaken, that usually works even if not on text.