I have a form. Labels and inputs should always be center-aligned. For this purpose I use
display: flex;
align-items: center;
on the container element. However when error text appears under the input, the label is pushed downwards. Considering the flex behavior it is absolutely correct, but is there a way to fix the alignment between label and input so they are always center-aligned regardless of possible divs below input?
Here is the demo
Also, please take into consideration that the use of flex container is obligatory here.
align-items:baseline;
is also not an option, as there can be a textarea instead of input.
Not with your current markup.
One way you could achieve this would be to add a class onto the parent when there is an error message. Using this class, and a wrapper div around your input and error messages, you could absolutely position the errors beneath the input and add the relevant margin to the bottom of the container.
This way the error messages would be out of the flow and thus the alignment would be as you wanted.
.form-group.validation-error {
margin-bottom: 30px;
}
.input-wrap {
position: relative;
}
.error-message {
position: absolute;
top: 40px;
}
Demo
Related
I want to style a div exactly like a button. I noticed that when I give the button a specific height, the text is always centered vertically.
So far i tried digging through the Chromium user agent stylesheets but was not successful. -webkit-appereance: button also did not do the trick.
Here is a demo of the issue: https://codepen.io/franzskuffka/pen/QzqKQx. Note that the inline-block styling gives makes sure the text is aligned vertically - the bounding box is still weird.
Which property makes the text centered vertically without any additional wrappers? What is going on here?
TL;DR: It is not possible to recreate the layout created by a <button> element using CSS. Or at least it is hidden really well.
I tested this by changing the display value to flex on a <button> and it affected the vertical alignment. Other values like display:block did not have an effect. It seems that there is no css value for this, it just is the default behavior and there is no way to do it for a div.
Like you, I was looking for an answer to this question. I was trying to find css property which centers vertically content in button. When I almost gave up I decided to leaf through html specification and this is what I found:
If the element is an input element, or if it is a button element and
its computed value for 'display' is not 'inline-grid', 'grid',
'inline-flex', or 'flex', then the element's box has a child anonymous
button content box with the following behaviors:
The box is a block-level block container that establishes a new
block formatting context (i.e., 'display' is 'flow-root').
If the box does not overflow in the horizontal axis, then it is
centered horizontally.
If the box does not overflow in the vertical axis, then it is
centered vertically. Otherwise, there is no anonymous button content box.
https://html.spec.whatwg.org/multipage/rendering.html#button-layout
If your button doesn't have a fixed height, you can add padding to the div to center the text vertically. Add text-align: center; to center your text horizontally.
.btn {
background-color: #000;
color: #fff;
padding: 10px;
text-align: center;
}
<div class="btn">Hello!</div>
For a button with a fixed height, you may have to have a child element.
.parent {
background-color: #000;
color: #fff;
height: 100px;
text-align: center;
width: 100px;
}
.child {
top: 50%;
transform: translateY(-50%);
}
<div class="parent">
<div class="child">Hello!</div>
</div>
There are several other methods, but these are the ones I commonly resort to. CSS-Tricks has a complete guide on centering in CSS if you'd like to try out more methods: https://css-tricks.com/centering-css-complete-guide/.
Here is JS Bin: http://jsbin.com/hetegodovo/edit?html,css,output
The only difference between these two blocks is their display property value.
.output {
display: flex;
}
.output.output--block {
display: block;
}
The first one makes absolute positioned .delete element "focusable" by caret while moving it with keyboard arrows.
And the second one makes lines breaks ugly.
Setting .wrapper element display property to inline-block leads to the first scenario.
What I am supposed to do with html and/or css to make it work properly? All markdown is generated by JS but can be modified easily.
I have a main wrapper div with a content div and a button. The button is supposed to go underneath the content div but for some reason it's overlapping with it.
The content div has css:
#groupMembers {
position: absolute;
height: 50%;
width: 90%;
left: 5%;
overflow: scroll;
display: inline-block;
}
and the button has:
button {
display: inline-block;
width: 70%;
left: 15%;
}
I thought since they're both inline-block that they wouldn't overlap, but for some reason they are. I made a JsFiddle to show: http://jsfiddle.net/b5hp6boz/
Can anybody help me get the button to display beneath the content div?
Remove the (extensive) use of absolute positioning.... Change it to position: relative; if necessary. But on many elements even that is not necessary.
Move the button div up to under the <h4>add members</h4> in the HTML where you appear to want it.
Then adjust margins for #DIV_05 and the button.
Fiddle Update or Fiddle Update 2
(Note I merely performed a search to change absolute to relative in your CSS, then adjusted from there.)
By using absolute positioning so extensively you were forcing elements into unnatural positions. Then when it wasn't working out.. you are left wondering why. Let things fall where they naturally want to fall. Change the HTML for overall render order, don't force things with absolute positioning.
Use of absolute position is most commonly used to adjust z-index and make elements not alter positioning of other elements. (like a global float of sorts) It should not be the fall back for positioning everything in any layout.
The problem in your code is that you have given the #DIV_5 the following CSS:
position: absolute;
By giving a HTML element an absolute position it is removed from the normal rendering process by not obtaining any space in the document. That means it is not affecting the position of the following BUTTON_105 element. That's why the button is positioned right underneath the H4_4 element (which is the first element not having an absolute position).
To fix that simply remove the position: absolute; declaration for #DIV_5. (Btw: You should try not to make heavy use of absolute positioning as it can cause further issues.)
Try giving your div tag a higher z-index value.
Overflow doesn't appear to be working when I use display: inline. I need to have the text inline, because it's something that appears at the top right of the webpage with "Hello," in front of it and a drop down arrow behind the name. If I remove the display: inline, the overflow works, but then the word in front and the image behind the name drops to a new row. I tried using inline-block, but that causes the text to actually wrap, though it's hidden, the name looks like I superscript it.
How can I make this work property?
div.actualName {
display: inline;
width: 40px;
height: 20px;
overflow: hidden;
}
This is
<div class="actualName">Bobby Joe Sanders</div>computer.
<br/>
Use inline-block but add the vertical-align:top rule. The default vertical alignment for inline elements is baseline.
div.actualName {
display: inline-block;
width: 40px;
height: 20px;
overflow: hidden;
vertical-align:top;
}
This is
<div class="actualName">Bobby Joe Sanders</div>computer.
<br/>
Using a styled span might be more useful in this particular example versus applying a div and class to style a few words in your line of text. Spans are more similar to in-line elements while divs are more like block elements. Let me know if it helps! Good luck.
I was trying to center text in two adjacent divs and I can not understand what I am doing wrong.
Basically I have 2 divs each taken 50% of the window. The first div contains an image (which I successfully centered) and I am trying to center the text in the second div. So here is my Fiddle and I am using the following css:
.thumbnail-descr{
text-align: center;
min-height: 10px;
display: table-cell;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
}
There is no point of having original DOM structure or CSS (the main thing is to have 2 divs taking all the width and one has a centered image another one has a text. How can I achieve it?
What I understand from the example is that you want to vertically center "Descr". There are several tricks to do that:
Adjust the padding and use box-sizing border-box to have better control of the height.
Use flexbox (still not broadly available): https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
If you know before hand that you'll have only one line of text you can use line-height.
(See the update for another option)
For example see this Fiddle:
.square{
width: 45%;
height: 200px;
border: 3px dotted #ddd;
display:inline-block;
margin: 0 10px 0 10px;
line-height: 200px;
}
But take a few things into account:
This will work only if you have one line of text, because on text wrap it will be broken.
This is not the normal use of line height, it's taking advantage of a side effect: text is vertically centered to the line-height.
This trick is used by some CSS frameworks (ie Bootstrap) to center the text on some components.
Update
I forgot another option, since you have one div inside the other you can use position: relative on the parent, and use absolute position for the child using top: 50% and a negative top margin. You'll need to setup the top margin to the half of the child height. (that's how modals are usually centered):
.square { position: relative; /*..*/ }
.thumbnail-descr{
position: absolute;
top: 50%;
margin-top: -10px;
/*...*/
}
See http://jsfiddle.net/diegof79/M4fKM/1/
Also you asked why your solution is not working... this can help to understand the reasons: http://phrogz.net/css/vertical-align/index.html
Before proceeding to giving you the solution, you could have he exact same result with a lot less code, giving so many classes for so little content can only lead to huge code.
The span class you are giving the text-align:center, doesn't fill up the whole width of the parent, so, where would it center the text since its width is equal to the text?
You can either put a 'text-align:center" to the span's parent, the square class, but I would use a different approach in general.
Not sure if you need a span.
If you remove span tag and use same css for the div styles, or simply ad a span class name to a your div class name- works perfectly.
i think the issue happen because the width in the description div
Try this suggestion:
warp the with div, the div will use thumbnail-descr class
<div class='square'>
<div class="thumbnail-descr"><span>Descr</span><div>
</div>
Update the thumbnail-descr
.thumbnail-descr{
text-align: center;
min-height: 10px;
background-color:red;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
width:100%;
}
hope this help