Geek asks and answers

How to make two different font sizes sit on one line using Unsemantic

Im new to both third-party developers and non-terrestrial ones. I am trying to get two different font sizes to sit on the same line. But conventional methods do not seem to work. I tried vertical alignment: "bottom;" but that did not cut it. This is what it currently looks like. Sorry I could not use jsfiddle to show you, using unsemantics means that it didn’t show properly

 10 <body class="grid-container">
 11 <header>
 12
 13   <div class ="grid-100 align-center">
 14   <div class="grid-30">
 15     <div id="name"><a href="http//nadiavu.com">Nadia</a></div> 
 16   </div>
 17   <div class="grid-30">
 18     <div id="about"><a href="about">About</a></div>
 19   </div>
 20   <div class="grid-20 suffix-20">
 21    <div id="contactpage"><a href="contacpage">Contact</a></div>
 22 </div>
 23 </div>

And this is CSS

 27 #name{
 28      color: #A0909D;
 29      font-size: 2.2em ;
 30      font-family: Palatino;
 31      float: right;
 32  }
 33
 56 #about{
 57     font-family: Palatino;
 58     font-size: 1.2em;
 59     float: right;
 60
 61
 62 }
 63
 64 #contactpage{
 65       font-family: Palatino;
 66       font-size: 1.2em;
 67       float: right;
 68
 69  }
+3
source share
3 answers

vertical-align is not created for this. Use the line-height property instead :

<!DOCTYPE html>
<html>
<head>
<style>
body {font-size: 16px;}
p {float: left; margin: 5px; }
p.big {font-size: 200%; line-height:35%;}
</style>
</head>

<body>
<p>
This
</p>

<p class="big">
This
</p>

<p>
This
</p>

</body>
</html>
+1

, , Demo.

css:

.big {
    font-size: 20px;
}

.small {
    font-size: 10px;
}

- .

- ,

css:

.parent {
    vertical-align: bottom;
}

.parent span {
    display: inline-block;
    width: 200px;
    height: 50px;
}

.big {
    font-size: 20px;
}

.small {
    font-size: 10px;
}

, :

!! ,

CSS

.parent {
    display: table;
    vertical-align: bottom;
    width: 100%;
}

.parent span {
    display: table-cell;
    width: 33%;
    height: 50px;
}

.big {
    font-size: 20px;
}

.small {
    font-size: 10px;
}

,

+2
<P style="color: white;font-size: 2.2em" class="w3-center"><span style="font-
size: 1.2em">Nadia</span>About<span style="font-size: 1.2em">Contact</span>
</P>

this is how you can get text of different sizes on the same line

0
source

More articles:


All Articles