I have some buttons that have varying numbers of lines of text, all with a fixed width and height. It seems that anything I put between the <button> </button> tags are vertically aligned to the middle by default. I want to vertically align the text within the button to the top, so that the first line of each button starts at the same line.
One workaround I found was this, but as you can see in this example (http://jsfiddle.net/d27NA/1/), with this approach, I have to manually designate the top property for buttons that contain texts of different lengths, else buttons that contain longer text will overflow the top.
I'm wondering if there is an alternate approach that will solve this problem in a more elegant way. Thanks.
html:
<div>
<button class="test">
This text is vertically center-aligned. I want this to be top-aligned.
</button>
</div>
css:
.test{
font-size:12px;
line-height:14px;
text-align:center;
height:100px;
width:100px;
}
Yup, just define the button as position:relative; and the span as position:absolute;top:0;left:0; and you're in business.
jsFiddle updated
UPDATE
So in the three years since this answer, flexbox has become more prominent. As such, you can do this now:
.test {
display: inline-flex; /* keep the inline nature of buttons */
align-items: flex-start; /* this is default */
}
This should give you what you're looking for. You may need to apply appearance: none; (with appropriate browser prefixes), but that should do it.
You just need to change the CSS of Button and Span. Separate both the CSS and make following changes:
button {
display: block;
position: relative;
}
span {
display: block;
position: absolute; //<-- Make it absolute
top: 0px; //<-- Set the top property accordingly. In this case 0px;
}
Set the position of span as absolute and set top property accordingly
Like PlantTheIdea's answer, this one adds a <span>, but is simpler and works across browsers.
<div>
<button class="test">
<span>
This text is vertically center-aligned. I want this to be top-aligned.
</span>
</button>
</div>
.test > span {
display: block;
height: 100%;
}
I would replace the BUTTON tag with A or DIV, and then style it to look like a button.
Related
It's a weird and not that important question:
if I create a button tag in html, then type some text like "click me" or something
<button> Click me! </button>
then use css to give it width and height, like:
.myBtn{
width:100px;
height:100px;
}
The words "Click me!" will automatically be right in the center of my button.
I tried text-align:left;, the words will move to the left side,
which means I disable its horizon center
but I don't know how to make it not vertical center ?
put elements vertical center always has some solution to make it(like after/before, flex, margin...etc), but today I wanna make the contents not vertical center in button,
I totally have no idea how to do that execpt changing its top and left.
does any body know what attributes should I change to make it not vertical center?
btw, I just wanna know what basic attributes the button has to make its contents center, not the solution of put the content in button to the left-top, so please don't tell me use top, left, calc or something calculate stuff about changing contents' position, that will be great.
.myBtn{
width:100px;
height: auto;
padding-bottom:82px;
min-height:100px;
}
<button class="myBtn"> Click me! </button>
You can use min-height and padding-bottom
you can did this by adding a <span> tag to your <button> tag .I'm added the snippet below
button{
width:100px;
height:100px;
}
button > span {
display: inline-block;
vertical-align: top;
}
button:after {
content: "";
display: inline-block;
vertical-align: top;
height: 100%;
}
<button>
<span> <!-- Added wrapper -->
Click Me...!
</span>
</button>
Complete noob here with HTML/CSS.
I'm trying to get something like this : http://imgur.com/Bc72V4M
Here is my code:
<div id="topbar">
<div class="image">
<img src="images/ghwlogo.png">
</div>
<div class="text">
<h1>TEXT TEXT TEXT TEXT TEXT</h1>
</div>
</div>
I've tried floating the div topbar, then display-inline but it never displays horizontally.
I'm so confused. Following tutorials is easy-peasy, but when you need to figure out how to do this yourself, it's completely different.
I think I'm missing a step somewhere. I feel like this should be really easy but it's not.
img {
display: inline;
vertical-align: middle;
}
.subhead {
display: inline;
vertical-align: middle;
}
<div>
<img src="http://dummyimage.com/100x100/000/fff"/>
<h1 class='subhead'>
TEXT
</h1>
</div>
I removed some HTML; I only add more when I can't think of how to get the effect with just CSS. You can add some back, but you may have to set display: inline on some inner elements then.
Generally, a few different ways of putting elements horizontally:
Floating: Removes it from standard flow layout, and may interfere with the root element's total height. Was previously the preferred method of placement but I feel like there are better alternatives.
Display Inline: Treats an element a bit like text. Cannot have a custom height or various other attributes.
Display Inline-Block: Often a "fix-all" for me when I want something laid out horizontally, but to have other styling aspects like height, border, etc.
Position Absolute: You can make a higher element a "relative element" for absolute positioning by setting position: relative on it. Like floating this takes it out of layout, but it can even overlap elements; useful for certain things. Don't rely on absolute pixel amounts too much.
In my case, once things are laid out horizontally, vertical alignment is the next issue. Remember that adding content could make this block very very tall, so you can't just say "vertical-align to the bottom of the thing". Think of all elements in the div as simply letters in a paragraph; for the smaller ones, you're telling it how to align that one letter. For the biggest ones, you're telling it where that "letter" is aligned compared to the others. So, it's important to set vertical alignment how you want it on the image as well.
EDIT: updated answer per #Katana314 answer. I've maintained the OP's markup.
#topbar {
width: 100%;
overflow: hidden;
}
.image {
display: inline-block;
vertical-align: middle;
border: 5px solid black;
height: 100px;
width: 100px;
}
.text {
display: inline-block;
vertical-align: middle;
}
Fiddle: https://jsfiddle.net/dgautsch/che0dtfk/
You could make the image and the text a separate div and then have both of them under the inline-block attribute. The text div would need to have a position: absolute attribute, though, for formatting purposes.
After viewing the Fiddle, you can adjust the left position attribute accordingly to generate space. Here is the link: https://jsfiddle.net/kuLLd866/.
HTML:
<body>
<div class="image">
<img src="http://gfx2.poged.com/poged/game_logo_default_fix.png?2492">
</div>
<div class="imagetext">
<h1>Text text text</h1>
</div>
</body>
CSS:
.image {
display: inline-block;
}
.imagetext {
position: absolute;
top: 50px;
display: inline-block;
}
inline-block elements using overflow: hidden position themselves so their bottom margin is the baseline. From http://www.w3.org/TR/CSS2/visudet.html#leading:
The baseline of an 'inline-block' is the baseline of its
last line box in the normal flow, unless it has either no
in-flow line boxes or if its 'overflow' property has a
computed value other than 'visible', in which case the
baseline is the bottom margin edge.
In practice this means these elements are shifted up unexpectedly; e.g., inside a <td> the element will not be vertically centered. A simpler example:
div {
border: 1px solid red;
text-decoration: underline;
}
.ib {
display: inline-block;
}
.h {
overflow: hidden;
}
<div>
<div class="ib">Visible</div>ABgjh</div><br>
<div>
<div class="ib h">Hidden</div>ABgjh</div>
the div with overflow: hidden doesn't share the same baseline as its surrounding line.
I'm looking for a simple way to make that div align itself as if it was following the normal rules for inline-block elements. Basically I want to write a custom element that "just works" whether its consumer applies a vertical-align style, or places it inside a <td>, etc.
This table has an example where I want the element to vertically center itself but instead it pushes itself up (and the rest of the line down).
This fiddle has more examples showing how different pairings of vertical-align behave unexpectedly when one element is display: inline-block; overflow: hidden.
To be clear, this question is asking whether a <div style="overflow: hidden"> can be wrapped in such a way that it can be treated as a regular inline-block element, positioning itself intelligently, without JS or font-based pixel adjustments. I'd want to be able to apply styling to the final component in order to position or align it as I please, as if it were a regular inline-block element.
I am not sure what browsers you are looking to support but if you wrap your DIV with display: flex; you wont get that vertical offset. You can see it here:
div {
border: 1px solid red;
text-decoration: underline;
}
.ib {
display: inline-block;
}
.h {
overflow: hidden;
}
.flex {
display: flex;
}
<div>
<div class="ib">Visible</div>
ABgjh
</div>
<div class="flex">
<div class="ib h">Hidden</div>
ABgjh
</div>
I normally don't use flexbox because of the lack of browser support but perhaps this is the simple solution you're looking for. Hope that helps.
I want to put text in the middle of the box in CSS3, but it's not working for some reasons.
Here's my code snippet (with code from Angularjs):
<div class="a" ng-repeat="i in l | filter:query">
<a class="b" href="{{i.a}}">{{i.b}} {{i.c}}</a>
</div>
And here's my css:
.b {
display: inline-block;
float: left;
margin: 8px;
height: 20px;
width: 100px;
}
And even if I add vertical-align: middle; to the above CSS, it doesn't put the text in the middle of the box... why?
Thanks.
You need to use css table-cell
DEMO http://jsfiddle.net/LstNS/31/
.b {
display: table-cell;
vertical-align: middle;
}
.a {
display: table;
height: 200px;
border: black thin solid;
}
vertical-align requires a lot of things to work right...
easiest method , and what I do, is just use line-height
so do
.b {
line-height: 20px;
}
adjust number of pixels accordingly, but that will center the text vertically for you
float kills display and so vertical-align if avalaibe.
inline-blocks element can be vertical-align aside text, other inline-boxes or on the line-height.
In your case , line-height alone will give height of parent (if unprecised) and set the link on it, right in the middle :), no need to give an inline-block display to <a> unless you need it to size it for instance (or whatever else style that needs layout) .
If .a has an height, give it an equal line-height.
Line-height works fine as long as you have one line of text.
if you want to use inline-block, and set middle alignement from itself it won'nt work, you need at least 2 elements as another inline-boxe, so it can center from something ... an extra box or pseudo-element might help.
.a {height:300px;}
.a:before {
content:'';
height:100%;
}
.a:before, .a a {
display:inline-block;
vertical-align:middle;
}
Else, vertical-align works on content of <td> or element wich receive a display:table-cell;. .a could then receive a display:table-cell and vertical-align and eventually an height. Usually it needs a parent as display:table to work fine.
.a {
display:table-cell;
height:200px;
vertical-align:middle;
}
I have no special links on tutorial for vertical-align , on W3C it is confusing somehow since both vertical-align for inline-box and cell content are dispatched in different documents.
I have two button bars- each contains links, but one also contains a submit button of a certain height. The one with the submit button has all the elements vertically centered. I want the other button bar, without the submit button, to look the same, so I gave it an explicit height. However, the links within it align to the top instead of in the middle.
What's going on here, and how can I make link bars that are of a consistent height, with vertically centered elements?
HTML:
<div class="link-bar">
<input type="submit" value="Save"/>
link
link
</div>
<div class="link-bar">
link
link
</div>
CSS:
input[type='submit'] {
width:100px;
height:40px;
border:solid red 1px;
}
.link-bar {
height:40px;
background:#EEE;
border:blue 1px solid;
margin:10px;
vertical-align: middle;
}
See jsFiddle for example
Simply add line-height equal to the height. By default, any text on that line will be vertically centered. The exception occurs if you wrap the text to a new line.
http://www.w3.org/wiki/CSS/Properties/line-height
I also removed your vertical-align as it's superfluous to content in block level elements. It only applies to inline elements.
.link-bar {
height: 40px;
background: #EEE;
border:blue 1px solid;
margin: 10px;
}
.link-bar a {
line-height: 40px; /* equal to the height of the container */
}
DEMO:
http://jsfiddle.net/SLqbk/9/
Use the line-height property.
.link-bar a {
line-height: 40px;
}
http://jsfiddle.net/SLqbk/7/
Add this to your css
.link-bar a {line-height: 40px; }
http://jsfiddle.net/xYVRj/
I gave #Sparky672 the answer because he correctly addressed my specific question and led me on the right path, but I want to share what I ended up doing, which I think is more effective overall:
Instead of explicitly setting the line-height of .link-bar a to try to match up to the container and button heights, I just set ALL the elements in the toolbar to the same line-height, and make them display:inline-bock. While the normal caveats of using inline-block apply (See here and here), the end result is consistent sizing and vertical centering for all the elements you throw in your toolbar, with less css to manage:
.link-bar * {
line-height: 30px;
display:inline-block;
/* Keep top-bottom padding of elements zeroed for consistent heights: */
padding-top:0; padding-bottom:0;
}
See the updated fiddle.