This question already has answers here:
Vertically align text next to an image?
(26 answers)
Closed 1 year ago.
I think I miss something, but I have following structure
.improvement_request_current {
display: block;
background: #777;
}
.improvement_request_current_title {
background-color: #999;
display: inline-block;
margin: auto 0;
vertical-align: center;
color: blue;
}
.improvement_request_current_value {
display: inline-block;
}
<div class="improvement_request_current">
<span class="improvement_request_current_title">Just some text</span>
<textarea class="improvement_request_current_value" rows="6" cols="50" maxlength="4096"></textarea>
</div>
In my opinion left part should be vertical aligned by center, but CSS have other opinion ) I've tried block/inline-block/inline variants with margin: auto 0/vertical-align variants with no success. What I'm doing wrong?
P.S. Without using flex and tables please. This is management constraints (
Use display: flex property and it make easy to align the content.
Along with it use align-items: center; to vertically center align
.improvement_request_current {
display: block;
background: #777;
display:flex;
align-items:center;
}
.improvement_request_current_title {
background-color: #999;
color: blue;
}
.improvement_request_current_value {
display: inline-block;
}
<div class="improvement_request_current">
<span class="improvement_request_current_title">Just some text</span>
<textarea class="improvement_request_current_value" rows="6" cols="50" maxlength="4096"></textarea>
</div>
Also one other method can be providing fixed height to parent and child(here given 100px) and than vertical-align: middle;.
But I don't recommend this method which you can see by removing comments from the background property and see that it is spanning out of parent element
.improvement_request_current {
display: block;
background: #777;
}
.improvement_request_current_title {
/*background-color: #999;*/
color: blue;
display: inline-block;
vertical-align: middle;
}
.improvement_request_current_value {
display: inline-block;
vertical-align: middle
}
<div class="improvement_request_current">
<span class="improvement_request_current_title">Just some text</span>
<textarea class="improvement_request_current_value" rows="6" cols="50" maxlength="4096"></textarea>
</div>
Temani Afif has given a short and simple solution, using vertical-align: middle to text-area will solve your problem
.improvement_request_current {
display: block;
background: #777;
}
.improvement_request_current_title {
background-color: #999;
color: blue;
}
.improvement_request_current_value {
display: inline-block;
vertical-align: middle
}
<div class="improvement_request_current">
<span class="improvement_request_current_title">Just some text</span>
<textarea class="improvement_request_current_value" rows="6" cols="50" maxlength="4096"></textarea>
</div>
Related
I am creating small divs that contain different colors so users can select them. Currently, I have to insert something between the span tag
<span>11</span>
so that the elements appear on the screen. I tried adding content:"" in the CSS but it's not working.
Can someone suggest to me a better way to solve the problem? The issue is when I'm creating a yellow box and then I have to add extra color: "yellow" to make sure the box is just a box with a color(no text in it). There should be a smarter approach right?
.colorselection {
width: 5px;
height: 5px;
margin-left: 12px;
content: "";
}
.colorselection--yellow {
background: yellow;
}
.colorselection--black {
background: black;
}
.colorselection--red {
background: red;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<span class='colorselection colorselection--black'>11 </span>
<span class='colorselection colorselection--red '>12 </span>
<span class='colorselection colorselection--yellow'>13 </span>
You should use Flexbox.
MDN Docs on Flexbox
CSS Tricks - Guide to Flexbox: this is a very good explanation of the concepts of Flexbox
.flex-box{
display: flex;
}
.colorselection {
width: 20px;
height: 20px;
margin: 2px;
}
.colorselection--yellow {
background: yellow;
}
.colorselection--black {
background: black;
}
.colorselection--red {
background: red;
}
.colorselection--red {
background: red;
}
<div class="flex-box">
<div class="colorselection colorselection--black"></div>
<div class="colorselection colorselection--red"></div>
<div class="colorselection colorselection--yellow"></div>
</div>
There are a few HTML tags working as a block element while span working as an inline element. So you either have to go with a block element HTML tag or simply use display: block or display: inline-block with your span tag.
.colorselection {
width: 25px;
height: 25px;
margin-bottom: 12px;
display: block;
background: #ddd; /* fallback color */
}
.colorselection.yellow {
background: yellow;
}
.colorselection.black {
background: black;
}
.colorselection.red {
background: red;
}
<span class="colorselection"></span>
<span class="colorselection yellow">11</span>
<span class="colorselection yellow"></span>
<span class="colorselection black">11</span>
<span class="colorselection red">11</span>
<span class="colorselection red"></span>
My preferred way of handling this is using CSS variables. You first create a variable that is scoped to the color-selection class, so that it can be overridden by changes within its own scope. Providing a block level display will allow the element to honor height and width dimensions. You could also use inline-flex, flex, or inline-block to achieve the same result.
.color-selection {
--box-color: transparent;
width: 25px;
height: 25px;
background-color: var(--box-color);
margin-bottom: 0.5rem;
display: block;
}
.color-selection.black {
--box-color: black;
}
.color-selection.yellow {
--box-color: yellow;
}
.color-selection.red {
--box-color: red;
}
<span class="color-selection"></span>
<span class="color-selection yellow"></span>
<span class="color-selection red"></span>
<span class="color-selection black"></span>
jsFiddle
I understand! The solution is quite simple. Use insted a inline-element a block element. If you want that all elements inline then you need additional to wrap the colored divs with display:flex.
.container {
display: flex;
gap: 20px;
}
.container div {
width: 40px;
height: 40px;
border:1px solid black;
}
.container div:nth-child(1) {
background: red;
}
.container div:nth-child(2) {
background: green;
}
.container div:nth-child(3) {
background: yellow;
}
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
My question is the following: What do I do (either in the HTML, CSS, or both) to move the radio buttons down? I want it so that the first radio button is in-line with the question and the following radio buttons are beneath the first i.e. listed in a 1,2,3 order going down.
My HTML is:
<div class="question">
<label>At what time of day did it happen?</label>
</div>
<div class="answer">
<input type="radio" id="morning"><label for="morning"> Morning</label><br>
<input type="radio" id="afternoon"><label for="afternoon"> Afternoon</label><br>
<input type="radio" id="evening"><label for="evening"> Evening</label>
</div>
And my CSS is:
.question {
border: 1px solid black;
display: inline-block;
width: 45%;
text-align: right;
}
.answer {
border: 1px solid black;
display: inline-block;
text-align: left;
width: 45%;
}
You can use additional div wrapper class container and flexbox properties align-items:flex-start, justify-content: center and A little white space like gap properties in this case.
.wrapper{
display: flex;
align-items:flex-start;
justify-content: center;
gap: 1rem;
}
.question {
border: 1px solid black;
display: inline-block;
width: 45%;
text-align: right;
}
.answer {
border: 1px solid black;
display: inline-block;
text-align: left;
width: 45%;
}
<div class="wrapper">
<div class="question">
<label>At what time of day did it happen?</label>
</div>
<div class="answer">
<input type="radio" id="morning"><label for="morning"> Morning</label><br>
<input type="radio" id="afternoon"><label for="afternoon"> Afternoon</label><br>
<input type="radio" id="evening"><label for="evening"> Evening</label>
</div>
</div>
I figured it out. I just need to add vertical-align: top; to .answer's CSS
I've had a bit of an issue with some flex containers. They're a label and an input in a flex container. Unfortunately, if I change the height of the container from auto, the contents cease aligning - the label's text remains at the start of the flexbox, but the input's text follows the middle. I've written a MWE to demonstrate.
label, input {
border-style: solid;
border-width: 2px;
border-color: red;
background-color: black;
}
.stretch {
display:flex;
height: 4em;
}
.baseline {
display: flex;
height: 4em;
align-content: baseline;
}
.flex-innards {
display: flex;
height: 4em;
align-content: stretch;
}
.flex-innards * {
display: flex;
align-items: center;
}
.flex-innards-start {
display: flex;
height: 4em;
align-content: stretch;
}
.flex-innards-start * {
display: flex;
align-items: flex-start;
}
.short {
height: auto;
}
<div class="stretch">
<label>Stretch alignment</label>
<input value=":("></input>
</div>
<div class="baseline">
<label>How about baseline?</label>
<input value=">:("></input>
</div>
<div class="flex-innards">
<label>Flexing the children kinda works</label>
<input value=":o"></input>
</div>
<div class="flex-innards-start">
<label>But only if they're centered</label>
<input value=":("></input>
</div>
<div class="field short">
<label>Deceptive stretch</label>
<input value=":S"></input>
</div>
https://jsbin.com/nulobolulo/edit?html,css,output.
I've managed to make them vertically centered together in the third box there (using How to vertically align and stretch content using CSS flexbox), but I'd like to have them both have their text aligned to flex-start, as well as filling the complete height of their container.
If possible, I'd like to avoid adding extra elements to the HTML. Thank you.
I think the only way to address this problem with CSS uses the padding property.
input {
padding-bottom: 40px;
}
label,
input {
border-style: solid;
border-width: 2px;
border-color: red;
}
.stretch {
display: flex;
height: 4em;
}
<div class="stretch">
<label>Stretch alignment</label>
<input value=":(">
</div>
I want to add a horizontal line in HTML between texts like shown in this screenshot. From this code, I get a line but not centered between the texts. How can I achieve this?
What I need is something like: Publication---------------------Method.
My code:
.horizontal{
display: inline-block;
width: 100px;
}
<div class="col-sm-4">
<h4>Publication <hr class="horizontal"/>Method</h4>
</div
You can set flex rules for the h4 tag. Aligns the center rule align-items: center. This example good aligns your line to the center of the words.
.col-sm-4 h4 {
display: inline-flex;
align-items: center;
}
.horizontal{
/*display: inline-block;*/
width: 100px;
margin: 0;
}
<div class="col-sm-4">
<h4>Publication <hr class="horizontal"/>Method</h4>
</div
Another solution is to use the pseudo selector ::after
.horizontal::after{
content: "";
display: inline-block;
border:1px solid black;
margin-left:2px;
margin-bottom: 3px;
width: 100px;
}
<div class="col-sm-4">
<h4>
<span class="horizontal">Publication</span>
Method
</h4>
</div
Add vertical-align property text-top.
vertical-align:text-top;
.horizontal{
display: inline-block;
width: 100px;
vertical-align:text-top;
}
<div class="col-sm-4">
<h4>Publication<hr class="horizontal"/>Method</h4>
</div
Pre History
I am building html form, with elements having multiple options ...., but instead of showing it as dropdown, i would like to show them as buttons without using any js, I removed buttons with label pointing to input checkbox.
Problem
I need label (or anchor or div) tag behave exactly like button tag without any extra wrapper tags, I googled all variation doesn't provide same result as native tag button.
<button class="button">
Text
<div>Small Text</div>
</button>
Solutions not work
line-height, padding does not provide same functionality, because button height/width and text length may vary. I tried special webkit style -webkit-appearance: button; no changes.
Mustery Flex
I tried flex
.button {
flex-wrap: wrap;
align-items: center;
justify-content: center;
display: inline-flex;
}
<div class="button">
Text
<div>Small Text</div>
</div>
but child div inside button not breaking/warping to new line.
p.s Environment tested, Google Chrome, Safari
I found solution using flex with flex-direction: column; so text and div treats like column items, here is code
label.button {
flex-direction: column;
justify-content: center; /* <-- actual veertical align */
display: inline-flex;
text-align:center;
}
JS Fiddle Demo
Does this does the job ?
div.button {
align-items: center;
text-align: center;
display: inline-block;
border: 1px solid black;
}
div.button div {
clear: both;
}
<div class="button">
Text
<div>Small Text</div>
</div>
Ghost element trick looks work well.
.wrap {
text-align: center;
background: #ededed;
margin: 20px;
}
.wrap:before {
content: '\200B';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered-guy {
display: inline-block;
vertical-align: middle;
width: 300px;
padding: 10px 15px;
border: #777 dotted 2px;
background: #666;
color: #fff;
}
<div class="wrap" style="height: 512px;">
<div class="centered-guy">
<h1>Some text</h1>
<p>Bool!<br>Look at me, mama!</p>
</div>
</div>