I got my link to look and function as i want but for some reason the arrow refuses to align middle with the text on hover
https://jsfiddle.net/Lo24dopt/
<div id="hero-content">
<span>Learn more </span></div>
Please note that vertical-align works on display: table-cell only.
https://jsfiddle.net/Lo24dopt/1/
#hero-content{
width: 100%;
display: table;
}
#hero-content a {
display: table-cell;
}
Give vertical align to the parent div instead of anchor tag.
Related
Buttons have a magic property where you can use margin: auto on them without setting a width. I'd like to be able to do this with a div. Is it possible?
div, button {
background-color: #FFA;
display: block;
margin: auto
}
<div> Center me </div>
<button> I Center Magically </button>
They do this by having a sort of magic internal sizing function which makes them only as big as their text:
Why doesn't "display: block" & "width: auto" stretch a button to fill the container?
I would like to know if I can make a div do this, without wrapping it in any containers (I know flex box around it would work).
Can I make a div shrink to text-width like a button, while still being display block, without necessitating a specific container?
EDIT: inline-block will not work for my use case.
Simply set a width on the <div> of fit-content:
div,
button {
background-color: #FFA;
display: block;
margin: auto
}
div {
width: fit-content;
text-align: center;
}
<div>Center me</div>
<button>I Center Magically</button>
Use display:table and you will have better support than fit-content (it doesn't work on Firefox, Edge and IE)
div,
button {
background-color: #FFA;
display: table;
margin: auto
}
<div> Center me </div>
<button> I Center Magically </button>
buttons will have inline-size:fit-content by default.
width:fit-content dose the same effect.
I have an answer on another question, where you can find spec ref.
I know how to vertical align the text by reducing the height of inner div and assigning it absolute positioning with top,bottom,left,right= 0,margin:auto properties
I also know display:flex layout but it also does not work properly.
problem is display:table and vertical-align does not work properly with bootstrap classes. My div is simple i assigned it proper height , my inner div has reduced height so it should vertically align but it does not. I used bootstrap. I do not want to use absolute position to center it. Any idea?
<div class="col-sm-3" style="height:65px;display:table;vertical-align:middle;">
<div style="display:table-cell;vertical-align:middle">abcabcabc</div>
</div>
When you are using bootstrap, vertical align is done with "display: inline block"
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
You can check here - http://plnkr.co/edit/vPKRjAf4wgtzJ7VVdOPN?p=preview
what about using line-height? if line-hight is equal to its hight the text is centered vertically
#test {
width: 100%;
height: 100px;
background-color: green;
line-height: 100px;
font-size: 32px;
text-align: center;
}
<div id="test">
Test Text
</div>
Hope this helps
Problem was with my div , i set its dimensions upon removing stuff, things worked out. Thanks.
I had a few hours of looking for the solution of this problem and now I'm gonna ask you.
So, I'd like to position a text left to an image. The image should float to the right and the text to the left but vertically aligned. I know I have to align the image to the text but it's not working. Here's my code:
CSS:
div.sale {
text-align: left;
}
div.sale img {
vertical-align: middle;
float: right;
clear: right;
}
And the other parts:
<div class="sale">
<img src="imagelink" alt="" width="150" height="150">
<span style="height: 75px;">simply text</span>
</div>
I'd be glad if you can help me!
Best regards!
You can vertically center the text by using display: table in combination with the
vertical-align: middle property
Explanation
added display: table to the outer div, establish table/table-cell relationship
added width: 100% to outer div - so it takes up the full width of the parent container
added display: table-cell to the span containing the text
Because its a table, the order of span#text and div.sale img matters, so I put text before image
apply vertical-align: middle; to the div.sale span element
Here is a working demo - http://jsbin.com/yurajijuxi/1/edit?html,output
lets say I got 20 same divs with float:left property and some width. I want them to be in one line and if they dont fit in screen just to make page scroll horizontally.
fiddle
That's basically how floats work. If you want the described behaviour you can do something else instead, for instance white-space: nowrap; on the container and display: inline-block; instead of float.
http://jsfiddle.net/NPzsV/3/
.container {
white-space: nowrap;
}
.line {
display: inline-block;
width: 200px;
vertical-align: top;
white-space: normal;
}
One thing to note though: with this approach, newlines/spaces/tabs between the divs will cause a space between them in the rendering.
Use display: inline-block instead of float: left on the divs, and add the property white-space: nowrap to their parent container.
Demo: http://jsbin.com/akiniv/1/edit
Demo with your fiddle ;) http://jsfiddle.net/NPzsV/4/
set the height to the parent div, and add the property overflow:scroll
<div class="parentDiv">
<div class="line">ddd</div>
<div class="line">ddd</div>
<div class="line">ddd</div>
...
</div>
and css:
.parentDiv{height:50px; overflow: scroll;}
Set a hard width on the parent element:
body{ width:8000px; }
Demo
This has probably been done before but I can't find a solution for my specific case. I have the following:
<div class="holder" style="height:260px;width:260px;">
<img src="image.jpg" />
</div>
How can I get the image to align into the middle of the div?
Normally, img is an inline-element, which means, that it's being aligned to the baseline of the text of your parent-element. This leaves a nasty space underneath your image.
You can prevent this with
img{
display:[inline-]block; /* or inline-block if the img isn't the only element in your div*/
}
This removes the reserved space underneath the image.
you can change the alignment by
img{
vertical-align: [top|middle|bottom|baseline|...] ;
}
to align it according to your text.
In general, you can only vertical-align inline elements. So an image with display:block won't be affected by a vertical alignment declaration.
Add
text-align: center;
vertical-align: middle;
display: table-cell;
to the div's style.
Try :
.img
{
display: block;
margin-left: auto;
margin-right: auto
}
If this is your mark up then you can use line-height property for this. Like this:
.holder{
line-height:260px;
}