Vertically Centering Links in inside Div - html

http://www.fccorp.us/index.php
The vertical column to the left is my site menu system. The column is a div with a height:100%, and the different details are div's laid over it.
The buttons are DIV's with blank buttons as backgrounds, with links on them. I have two different size buttons, the big one 60px tall and the small one 30px. Using CSS can I get the links to be centered vertically regardless of the height of the button's DIV?
I've looked here and used a few CSS sites & Android Apps. The site here suggests I can't, but I can't understand why the CSS group would not create a vertically centering function since it seems so needed.
Am I just missing something or am I really trying to get something that isn't available with CSS?

Based off your site, you can use line-height to adjust the vertical positioning of the text.
Try applying this to your 30px tall links:
line-height: 30px;
And this for the 60px tall:
line-height: 60px;
Additionally, you should not be nesting <div> tags within <a> tags.

Use this:
.menubuttonthick{line-height:60px;}
.menubuttonthin{line-height:30px;}
That will center all of your links.
On another note, currently you have the following structure:
<a href="#">
<div>text</div>
</a>
That is invalid HTML. I'm not a "HTML must be valid at all times" type of guy, but when you can fix it that easily, I think it wouldn't hurt making it valid. You should use the following:
<div>
text
</div>

Add this to your CSS. It will work regardless of the height of your buttons:
.menubar a div {
display: table-cell;
vertical-align: middle;
}

Related

html / css positioning images

im looking to position my image in the middle of the screen, maybe a little bit to the left or right, but am looking for help on how to position the image to wherever I feel, also correct my html / css if you believe I am making it too hard / incorrect - many thanks in advance - Miles
Edit: for those wondering what this page is, it's an entrance page with a background image and another image that says "enter here" which is hyperlinked to the index of my actual website.
<html>
<head>
<title>Enter</title>
<link rel="stylesheet" href="style1.css">
</head>
<body background="index1background.jpg">
<div id="enterhere">
<p><a href="index2.html" title="Enter Here"><img src="index1enter.png"
alt="Enter Here"</a></p>
</div>
</body>
</html>
css:
#enterhere {
position: middle;
}
img {
margin-left: auto;
margin-right: auto;
display: block;
}
Then you can add padding in order to adjust left and right. The text-align: center does not work in this case.
Edit: If you want to go even shorter, here's a shorter version.
margin: 100px auto 0 auto;
This snippet includes a margin-top of 100px. Here's how it works. Instead of using the keywords margin-top, margin-right, etc, we use the main keyword, just margin. Then the positions:
margin: [top] [right] [bottom] [left];
This works for the padding aswell.
Use the text-align property used in case to place your image where ever you want
If you choose to place the image in the css take a look at the properties "background-size" and "Background-position".
I'd you choose to bring the images into an img tag specify the position with the container above. There are two ways to handle that. Flexbox and css grid (check the w3 website for awesome details). After the positioning with one of these methods you can adjust the position of your image with the property "margin" which you will set in the image's css.
Make sure it has a reason where you will place your images - css or html. Images placed in html should be relevant to the content (like product pictures). Css placed images should be unnecessary for the content (like decoration images).

How to vertically center an <img> with CSS and NOT overlap a text?

I'm trying to put a logo in my forum, but neither the engine nor the template I use support this. So I decided to give it a try and put it. It seems so simple, but it's not.
I've tried at least 5 ways I found in the net (mostly from StackOverflow), but they either do not work at all (image not centered vertically) or solve the problem only partially as the image overlaps a text following it.
The only solution which worked in terms of vertical-centering is based on position: absolute and margin: auto
<img src="/EL3232.png" width="32" height="32" style="
float: left;
position: absolute;
top:0;
bottom:0;
margin:auto;
">
It has however a side effect: the image overlaps the forum title text.
The HTML is quite complex I would say and its simplification for the post is not easy (a lot of CSS for each preceding element), so I think I will just pass the link to my website, so you knew what I mean:
http://www.forumextalife.pl/
It's basically a hierarchy like this:
<div> -> <nav> -> <div> -> <div> -> <a>. I want to put an <img> containig the logo inside this <a> tag.
To be exact - the element in the website is: <a class="navbar-brand">
I hope you guys can solve it. I've never thought this is gonna be so complicated to have simply an image centered vertically and not overlapping text.
The cleanest approach is probably to set the image as a background image of .navbar-brand, with a bit of padding and/or line height so that the title aligns appropriately alongside it. Something like this...
.navbar-brand {
background:url(/EL3232.png) left center no-repeat;
display:inline-block;
padding-left:40px;
height:32px;
line-height:32px;
}
Keep responsive design in mind, though - I see your title already is limited at mobile sizes.

Stretching <a> tags across a sidebar while vertically aligning its contents to the center

I want to put a bunch of clickable links in a sidebar with a hover effect that covers the entire width of the sidebar. Some of these links also include an image that needs to be aligned so that it's vertically centered in relation to the text. Here's what I currently have:
As you can see, the hover effect and the <a> tag don't cover the entire width of the sidebar yet. That's bad because of big link targets are easier to click. I've tried tinkering with horizontally stretched CSS-based table cells, but then the text parts didn't stay aligned properly.
What's the proper way to do it? ~I could post my current HTML if it's helpful, but I was planning to rewrite my markup based on this answer's solution anyway.~
Edit: here's the relevant HTML snippet.
<nav id="sidebar">
<ul>
<li>Home</li>
</ul>
<header>Recently Added</header>
<ul id="recents">
<li><img src="http://media.radiantstreamer.net/stations/q2music.png" alt="Artwork"> <span>Q2 Music</span></li>
<li><img src="http://media.radiantstreamer.net/stations/rtmoclassic.png" alt="Artwork"> <span>Mostly Classical</span></li>
<li><img src="http://media.radiantstreamer.net/stations/rtpitrios.png" alt="Artwork"> <span>Piano Trios</span></li>
</ul>
</nav>
Putting display: block; on the relevant links should make them full width. Or if it doesn't, display: block; width: 100%;. width: 100% on its own doesn't seem to be much use on inline elements.
…And some positioning to fix the alignment, e.g.
ul li a {
display:block;
text-decoration:none;
position:relative;
}
ul li a span {
position:absolute;
top:50%;
}
Have you tried position: absolute; width: 100% (or something like that) on your links? That should make it the parent's full width.
How I solved it
First I made my <a> tags render as a one-row CSS table by setting them to display: table and its children to display: table-cell. You'll need to add width: 100% to the table tag to make it stretch horizontally. But then the text didn't align properly:
Adding a width: 100% to <span> containing the text does the trick:
Uh oh... the 5 pixels of left padding on my links are causing spillover on the right. The fix was fairly easy: wrap the link tags in another <span> tag and adjust the CSS display rules so that the new <span> renders as a table. Bam!
Summary
I've prepared a minimally working HTML5-compliant example for the benefit of future readers.

Force CSS to square image in a responsive container

I have a responsive image grid background in my website.
All its working fine with perfectly square images but when one image is for example 1px height bigger, the grid breaks.
Example OK:
[H][H][H][H][H][H]
[H][H][H][H][H][H]
[H][H][H][H][H][H]
Example FAIL
[H][H][H][H][H][H]
[H][H][H][A][H][H]
[H][H]
[H][H][H][H][H][H]
I dont want to use mansory o other plugins, this is my code:
HTML
<div class="resp pull-left">
<img class="img-responsive indexUser" src="image.jpg">
</div>
CSS
.resp{
width:10%;
height:10%;
}
.resp img{
width:100%;
}
Im using Bootstrap 3. Is it possible to do it?
EDIT WITH MORE INFORMATION
I want to put only square pictures in order, sorry, without grid. The image containers are floating. This is the screenshot with the problem:
Is responsive and I need to use % in with to adjust perfectly fullscreen allways
There are two things you can try here that might answer your question. Of course, without seeing your code it's very hard to advise in a more in-depth fashion.
If you're using Boostratp, why not wrap each row of images in a row-fluid container and use it's grid system? This will at least ensure that you don't get the dirty float bug, although it also means that you'll get a little extra space underneath the child elements of that one taller one.
Or, set the parent anchor's height and set overflow: hidden. This will essentially cut off the bottom edge of the taller image, although you would have to work through your break points.
As a code example of point two above:
.resp a{
display: block;
max-height: 300px;
overflow: hidden;
}
Bear in mind that images in Bootstrap have max-width: 100% set to them automatically so they will always flow to the width of the container if wide enough.
You will probably need to provide a height and maybe even set overflow:hidden. Please provide more markup if you want a better answer.
This is one linked image in a div, not a grid:
<div class="resp pull-left">
<img class="img-responsive indexUser" src="image.jpg">
</div>
<figure><img src="images/edu.jpg"></figure>
figure img {
width: 100%;
}

using images inside <button> element

I am trying to include an image and some text inside a button element. My code is as follows:
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>
The CSS is:
.testButton1
{
font-size:100%;
height:10%;
width: 25%
}
.testButton1 img
{
height:80%;
vertical-align:middle;
}
What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using &nbsp works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.
What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.
Any help, as always, is appreciated. Thank you.
Background Image Approach
You can use a background image and have full control over the image positioning.
Working example: http://jsfiddle.net/EFsU8/
BUTTON {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background: #f0f0f0 url([url or base 64 data]);
background-position: 8px 8px;
background-repeat: no-repeat;
}​
A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/
And another example showing adjustments to the button based on the :hover and :active states.
Child Element Approach
The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
Change button display style to inline-block, img float to left. Add margin to img as necessary.
<button style="display:inline-block">
<img src="url" style="float:left;margin-right:0.5em">Caption
</button>
If you want to use image inside the button not in the CSS I think this help you:
http://jsfiddle.net/FaNpG/1/
Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.