Text Vertical Align Propery CSS

HTML & CSS
1

I can’t seem to get any code to work on vertically aligning (middle or center) text in the button. Any help would be appreciated.

<style>
.container {
  text-align: center;
  vertical-align: text-middle;
}
.button {
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  text-align: center;
  width: 120px;
  height: 60px;    
  background-color: #4c659b;
  border: 2px solid #4c659b;
  color: #ffffff;
  display: inline-block;
  font-size: .8em;
  padding: 3px;
  transition: 0.35s;
}
.button:hover {
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  background-color: #c4d7dd;
  border-color: white;
  color: #000000;
}
</style>

<a class="button" href= "webdomain here">Text Here</a>
2

Hi there javascript7,

does this help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

.button {
    display:table-cell;
    width: 9.38em;
    height: 4.69em;  
    padding: 0.23em;
    border: 0.16em solid #4c659b;
    vertical-align: middle;
    background-color: #4c659b;
    font-family: arial, helvetica, sans-serif;
    font-size: 0.8em;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    text-align: center;
    transition: 0.35s ease-in-out;
 }

.button:hover, 
.button:active {
    border-color: #fff;
    background-color: #c4d7dd;
    color: #000;
 }
</style>

</head>
<body>

 <a class="button" href= "#">Text Here</a>

</body>
</html>

coothead

3 Likes
3

Yes, perfect! Thank you.

4

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead

5

If I wanted another button with the same properties, and other than the obvious way of duplicating the code as button2 (and changing width/height) - is there a simple way to change the width of one button width: 150px; height: 100px and then assigning it another class for just that one button - not affecting the existing button CSS properties?

6

You could use an additional class to affect just that button. But when you make them display as table-cells they will behave like the text line they sit on is a table row and adjust accordingly as they would in a table.

That means you can’t use CSS table cells if you want separate heights to apply. But there are other ways to vertical align inline content independently.

In this example from the code @coothead posted, flexbox is applied for the buttons to affect their content. Now their parent is not affected as in the table-cell example, so they will be left sitting on the text line as inline elements and be aligned as such.

<!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8">
<title>Untitled</title>
<style>
.button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 9.38em;
	height: 4.69em;  
	background-color: #4c659b;
	color: #fff;
	vertical-align: top; /* as an inline element */
	text-decoration: none;
}
.button:focus, 
.button:hover {
	background-color: #c4d7dd;
	color: #000;
}
.button2 {
	width: 150px;
	height: 100px;
}
</style>
</head><body>

<div>
	<a class="button" href= "#">Text Here</a>
	<a class="button button2" href= "#">Text Here</a>
</div>

</body></html>
5 Likes
7

Thanks!

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.