Align Text Baseline with a Button in CSS

Align text baseline with a button in CSS

I think what you're after is vertical-align: text-bottom;

http://jsfiddle.net/EQgFF/3/

p.box {
    color:#fff;
    background:#444;
    width:400px;
    line-height: 40px;
}

span { background: #666; }

input { vertical-align: text-bottom; border: 1px solid #CCC; height: 24px; }

<p class="box"><span>some text</span> <input type="button" value="Button"/></p>

Button has different baseline behaviour

Temani's Pointer to this elaborate analysis was a good one.

Well, there's a solution then, it seems:

• if I refrain from defining height, and put the desired height into line-height instead
• and set vertical-align: middle (relevant for all tags except the button)

    overflow: hidden      
    width: 60px
    vertical-align: middle // button won't care, but everyone else
    line-height: 100px

I get, what I want (also the exact height btw, not plus some other base value)

Bootstrap: vertically align paragraph text and buttons

Using the same styling as the .btn would probably be a good approach. Example with disabled .btn

<p>
    <a class="btn btn-default" href="#">Take exam</a> 
    <span class="text-muted btn" disabled="true">Text</span>
</p>

---

Or make a class of .btn-align with the same attributes. Example

CSS

.btn-align {
    padding: 6px 12px;
    line-height: 1.42857143;
    vertical-align: middle;

}

HTML

<p>
  <a class="btn btn-default" href="#">Take exam</a> 
  <span class="text-muted btn-align">Available after reading course material</span>
</p>

How to align text and button by bottom

In bootstrap by default vertical-align is middle you need to change it to bottom with !important as bootstrap css is already having defines vertical-align property

Use vertical-align:bottom !important; to button

body {    margin: 10px;}button{  vertical-align:bottom !important}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>123 <button class ="btn btn-default btn-lg ">123</button>

css flex box align text center with buttons below it

@Katie Melosto. I think that the most important thing to deal with flex box is to know where to apply flex to align items, i.e parent element or child element itself.
You can check this url for detailed information of flex css.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I have changed some part of your code.
Check this url for my chage.

"https://codepen.io/devbluesky111/pen/oNZxBYW"

body {
  display: flex;
  justify-content: center;
} 
.calc {
   display: inline-block;
   /* align-items: center; */
   padding-top: 200px;
   padding-left: 20px;
   display: flex-column;
}
.search_btn {
  align-items: center;
  width: 150px;
  margin: 0 auto;
  /* display: flex; */
  display: block;
}

.search_txt {
  width: 300px;
  margin: 0 auto;
  display: block;
  border-radius: 25px;
  margin-bottom: 10px;
}
.buttons {
  display: flex;
/*   flex-direction: column; */
}

<form class="calc" action="https://calculator.com">
  <input class="search_txt" type="text" name="q">
  <div class="buttons">
    <input class="search_btn" type="submit" value="value">
    <input class="search_btn" type="submit" value="area">
  </div>
</form>

align text baseline over hr

Given the image, your <p> has some margin-bottom, add the bootstrap class mb-0 to the <p> tag.

Then to align the <p> to the bottom, you'd need to have the flex content pushed to bottom, that will be done with adding align-items-end to the div.

I also added a small padding to stop it from sticking to the bottom.

JSFiddle

Edit: As per the answer from G-Cyrillus, you actually don't need the positions either (I overlooked it before). A little change in structure and whole thing looks the same with lesser code. Updated JSFiddle

Vertically align buttons with wrapped text, side by side

buttons are inline elements which are aligned baseline vertically by default...

...so use vertical-align:top to button...

Stack Snippet

.container {  width: 200px;  border: 1px solid black;}
button {  width: 50%;  height: 40px;  vertical-align: top;}

<div class="container">  <button>TEST</button><button>TEST WRAP TEXT</button></div>

---

Related Topics