How to Vertically Align 2 Different Sizes of Text

How to vertically align 2 different sizes of text?

Try vertical-align:middle; on inline containers?

EDIT : it works but all your text must be in an inline container, like this :

    <div style="height:100px; line-height:100px; background:#EEE;">        <span style="vertical-align:middle;">test</span>        <span style="font-size:2em; vertical-align:middle;">test</span>    </div>

how to vertically align the 2 different font sizes inside a single p

See http://jsfiddle.net/kfVGf/2/

.moduleCard{
    font-size:60px !important;
    padding:0 4px;
    display: inline-block;
    vertical-align: middle;
}

Result:

Sample Image

Note: unless you have a valid reason for it, avoid to use !important

CSS vertical align different text size

Just add in the vertical-align:middle; style.

http://jsfiddle.net/uEu6B/1/

How to vertically align items with different sizes?

You can approximate this using baseline alignment and pseudo element. Change baseline with center in the below example to see that left/right will stay at the same place.

.container {  display: flex;  flex-flow: row;  align-items: baseline;  border: 1px solid black;  height:200px;  background:linear-gradient(red,red) center/100% 1px no-repeat}.container:before {  content:"";  height:calc(50% + 0.25em)}.container div {  margin: 10px;  padding: 10px;  border: 1px solid black;}
.container span {  display: block;}

<div class="container">  <div>left</div>  <div>center<span class="nested child">nested content</span></div>  <div>right</div></div>
<div class="container">  <div>left</div>  <div>center</div>  <div>right</div></div>

Vertically align 2 different font sizes to the bottom

Use vertical-align: baseline instead or you could completely remove the vertical-align property, since the default value of vertical-align is baseline.

vertical-align: text-bottom will also work.

.table {  width: 200px;  display: table;}.tablecell {  display: table-cell;}.tablecell1 {  font-size: 40px;}.tablecell2 {  padding-left: 15px;  font-size: 20px;}

<div class="table">  <div class="tablecell tablecell1">7.1</div>  <div class="tablecell tablecell2">Inches</div></div>

Vertically align text with different font sizes in navigation bar

You're mixing together float and display properties for positioning. inline-block respects baselines, whereas floating doesn't.

Flexbox is a more modern approach than float. This is how you can do it:
http://jsfiddle.net/mdqf81da/

Vertically Align texts with different sizes in a

Have you tried

vertical-align:middle;

vertical-align:-10%;

? This looks all right to me.

Vertical Align Two Spans (Different font size)

add vertical-align: bottom to .triple-bar:

.triple-bar {
  font-size: 3em;
  margin: 0 0.25em 0 0.5em;
  vertical-align: bottom;
}

FIDDLE

How to Vertically Align 2 Different Sizes of Text