-1

Consider this answer to the question how to vertically align 2 different sizes of text. As it is stated in the comments "this seems to fail if I want the second span to be right floated. Then its aligned on top. Any ideas how to make it work with float?". The example given in the comments can be found here:

HTML:

<title>Untitled Document</title>

<body>
<div> 
  <span>100</span>
  <span>This is the desc</span> 
</div>

CSS:

div {
display:table-cell;
vertical-align:middle;
text-align:center;
height:200px;
width:300px;
margin:auto;
background:red;
border:1px solid #f00;
font-size: 40px;
}
span {
display:inline-block;
vertical-align:middle;
padding:0 10px;

}
span + span { 
  font-size:50%; float: right; 
}

I stumbled across the same problem and would like to open this as a new question, as the other is already answered and it seems unlikely that the answer will be updated on its own.

Community
  • 1
  • 1
efie
  • 544
  • 5
  • 22

2 Answers2

1

flexbox can do this if floating is not a requirement.

div {
  display: flex;
  height: 200px;
  width: 300px;
  margin: auto;
  background: orange;
  font-size: 20px;
  align-items: center;
}
p {
  flex: 1;
  border: 1px solid green;
  padding: 0 10px;
}
p:first-of-type {
  font-size: 50px
}
<div>
  <p>100</p>
  <p>This is the desc</p>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

To my knowledge, I do not believe this can be done with float alone (obviously I would be happy to be proved otherwise!), however there may be a way around this which may hopefully help. Please see here.

You can vertically center elements using position absolute, even without knowing the height of the element, by doing something like:

top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

Full explanation can be found here.

Hope that helps in some way?

wickywills
  • 4,024
  • 2
  • 38
  • 54