I am trying to inline a Bootstrap 4 carousel with another inline-block element (represented by an <img> element here). But whenever I put them side-to-side, the carousel element gets shifted upwards by 50% its height. How can I have them perfectly side-by-side?
Repro JSFiddle: https://jsfiddle.net/yok78wrt/2/
Use vertical-align:top;
The vertical-align property in CSS controls how elements set next to
each other on a line are lined up.
The working jsfiddle:
https://jsfiddle.net/y5a0b18s/
The valid values are:
baseline - This is the default value. top - Align the top of the
element and its descendants with the top of the entire line. bottom -
Align the bottom of the element and its descendants with the bottom of
the entire line. middle - Aligns the middle of the element with the
middle of lowercase letters in the parent. text-top - Aligns the top
of the element with the top of the parent element's font. text-bottom -
Aligns the bottom of the element with the bottom of the parent
element's font. sub - Aligns the baseline of the element with the
subscript-baseline of its parent. Like where a would sit. super
- Aligns the baseline of the element with the superscript-baseline of its parent. Like where a would sit. length - Aligns the baseline
of the element at the given length above the baseline of its parent.
(e.g. px, %, em, rem, etc.)
Go to inspect element and you will get that tag has a property vertical-align: middle. That's why your image is not aligned side by side.
You can add a custom class to your css file and like that
<img class="image-position" src="https://loremflickr.com/200/200">
and in the css file you need to write:
.image-position {
vertical-align: top;
border-style: none;
}
after doing that the image and the slider will be side by side as you want.
Related
To replicate bug:
Resize your browser width so that you can see the "ALDO" logo
Uncomment this 1 line of code
.logobox {
/* display:flex; */
}
"ALDO" logo becomes vertically centered.
Why are the logo's being vertically centered when I add a display of flex? Shouldn't this only happen if I add a justify center or align center? What is causing this bug?
The "Aldo" logo is an image file. Generally speaking, whether it's an img or svg element, images are set to display: inline by default.
Inline level elements are set, also by default, to vertical-align: baseline. This setting raises the image slightly from the baseline (the line upon which text rests). This extra space is created to accommodate "descenders", which apply to text, not to images, but display: inline doesn't make that distinction.
When you switch from display: inline to display: flex, the images are automatically set to display: flex, which renders them as block-level elements. Such elements are not set to vertical-align: baseline.
In your code, this results in the images shifting downward into the descender space.
More details here:
Mystery white space underneath image tag
Why is my textarea higher up than its neighbor?
Span element with display: inline-flex has greater height than sibling span
I have set up a simple markup to try to understand how vertical aligning works, but how font-size affect the alignment got me confused.
Example with font-size set on parent element: https://jsfiddle.net/wL5zjLnf/1/
section { font-size: 75px; }
Same example with font-size set directly on span: https://jsfiddle.net/tmk2hqon/
span { font-size: 75px; }
In the first example the red block seem to align its middle with text last line middle, while in the second example the red block middle seem to align with baseline.
It seems to me like some white-space between the elements mess up the aligning between the text and the block, as if there are three elements:
The text (75px)
A white-space (75px in first example, normal font sized in second example), which align baseline to baseline with the text
A red block, which align its middle to middle of the white-space
Is this expected behavior, or have I misinterpreted how it works? I would have assumed that both examples would give the same result, and the result would be the red block middle be aligned with the bottom of the last line of text.
By setting the parent's font-size, you implicitly set it's line-height as well, thus, the div will be in the middle.
When setting the span's font-size, the parent's line-height remains untouched and so the div is (apparently) at baseline level while it still is in the middle of the parent's line-height.
Usually people try to figure out how to vertically center stuff, I want to remove an instance of centered content and align and I'm stuck.
The content of the button (that is placed in a list in a table cell) is vertically centered by default. How can I remove this? How to align the contents of the <button> vertically to the top?
<table>
<tbody>
<td>
<ul>
<li>
<button>
<div>Content</div>
I have an example on jsFiddle.
button {
display: block;
position: relative;
background-color: pink;
width: 100%;
min-height: 200px;
}
<button>
<div>why?</div>
<div>are these centered vertically?</div>
<div>And how to remove it?</div>
</button>
Why the contents are vertically centered?
There's no specific reason. This is the way UAs handle the position of value/content of buttons (including <button>, <input type="button">)1.
How to remove vertical centering?
Well, there's a way to achieve that. First, a little background is needed.
But before that, you should note that <div> elements are supposed to be used where flow contents are expected. This means that they are NOT allowed to be placed inside <button> elements.
As per HTML5 spec (Which is at PR state right now):
Content model for element button:
Phrasing content, but there must be no interactive content descendant.
Therefore, a valid HTML could be like this:
<button>
why? <br>
are these centered vertically? <br>
And how to remove it?
</button>
Background
In an inline flow, inline-level elements (inline, inline-block) can be aligned vertically inside the parent by vertical-align property. Using that with a value other than baseline makes inline-level elements position somewhere other than the baseline of the parent (which is the default place).
The key point is that taller elements would affect the line box / baseline.
The Solution
First, in order to handle the position of the lines, we need to wrap them by a wrapper element like <span> as follows:
<button>
<span> <!-- Added wrapper -->
why? <br>
are these centered vertically? <br>
And how to remove it?
</span>
</button>
In cases that the parent - the <button> in this case - has an explicit height, by any chance if we could have a child element having the exact same height of the parent, we would be able to expand the height of the line box and surprisingly make our desired in-flow child - the nested <span> in this case - be aligned to the top vertically by vertical-align: top; declaration.
10.8 Line height calculations: 'vertical-align' property
This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.
top
Align the top of the aligned subtree with the top of the line box.
EXAMPLE HERE
button { width: 100%; height: 200px; }
button > span {
display: inline-block;
vertical-align: top;
}
button:after {
content: "";
display: inline-block;
vertical-align: top;
height: 100%;
}
Last bot not least, if you'd like to use min-height rather than height for the button, you should use min-height: inherit; for the pseudo-element as well.
EXAMPLE HERE.
1 Chrome and Firefox also display the value of text inputs vertically at the middle while IE8 doesn't for instance.
Bootstrap adds padding above and below the button content (6 pixels). You can alter the padding amount with: button{padding:0px;} or button{padding-top:x; padding-bottom:y;} where x and y are whatever value you choose.
If you want to alter that button only give the button id="table" or something like that and then do: button#table{padding:0px;}
If you can avoid using vertical align you should as not all browsers support it.
http://pastebin.com/index/9M2rA8cx that has all my code.
You will notice that the two div's are centered in large.css. However, the text is being re-centered after each '.' is applied. If I put the span id="wait" outside the centered div, it will show up in the upper left corner. I don't need exact centering, but I can't use a absolute position for centering because the text changes.
Is there any way to append the "..." to the already centered text without it re-centering?
thanks!
Can't you just apply a fixed width style to the wait span, such as:
span.wait{
display: inline-block;
width: 20px;
}
I am creating a menu to my site in ul.buttons.
In it I have a title, span.button-title, a sub-title span and a code p.
This code must be aligned vertically to the center, half of the title and subtitle.
How to make the autura the tag p (in red) will have the same autura of div.button. I tried height: 100%; but failed.
After her stay with the same height, I would align the tag p in the center, vertical.
See the code.
Thanks.
I updated your jsFiddle with some changes.
First, inline-block elements don't consider the vertical size. So it's necessary changing to block and do the horizontal align with float.
Then, elements cannot use height: 100% if their parent has no fixed height. Then a height was set to the button class.