英文:
How can I vertically center text within my button element?
问题
I've created a button element, and am having a difficult time getting the text vertically centered. The margin and padding appear to not be an issue. I feel like I'm missing something straightforward, or not fully understanding how the element is being rendered.
button with vertically uncentered text
https://jsfiddle.net/morcant/tovp1s6c/1/
I've tried centering the element with display: inline-flex; align-items: center;, and adjusting the line-height value. Changing the line height appears to increase the height of the line, but doesn't seem to help with vertically centering the text.
I'm using Firefox and Windows 10, with the Simple CSS framework.
英文:
I've created a button element, and am having a difficult time getting the text vertically centered. The margin and padding appear to not be an issue. I feel like I'm missing something straightforward, or not fully understanding how the element is being rendered.
button with vertically uncentered text
https://jsfiddle.net/morcant/tovp1s6c/1/
I've tried centering the element with display: inline-flex; align-items: center;, and adjusting the line-height value. Changing the line height appears to increase the height of the line, but doesn't seem to help with vertically centering the text.
I'm using Firefox and Windows 10, with the Simple CSS framework.
答案1
得分: 1
您可以在联系按钮之前/之后添加一些HTML内容，并指定它们的高度百分比：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html > body > header {
padding: 0 2rem;
}
.contact > div {
height: 35%;
}
header > ul.nav {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-top: 1rem;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
header > ul.nav li {
display: flex;
flex-direction: column;
}
header > ul.nav .nav-title-container {
text-align: left;
flex-grow: 1;
padding-right: 1rem;
padding-bottom: 1rem;
}
header > ul.nav .nav-title {
margin-top: 0;
margin-left: 0;
}
header > ul.nav .nav-title a {
color: var(--code);
}
header > ul.nav .nav-subtitle {
margin-bottom: .25rem;
margin-top: .25rem;
}
header > ul.nav .contact {
display: flex;
flex-direction: column;
padding-bottom: 1rem;
}
header > ul.nav .contact button {
margin-top: 0;
margin-bottom: 0;
background-color: transparent;
color: var(--code);
border: 1px solid var(--code);
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>First Last</title>
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
</head>
<body>
<header>
<ul class="nav">
<li class="nav-title-container">
<h1 class="nav-title"><a href="/index.html">First Last</a></h1>
<h4 class="nav-subtitle">Title</h4>
<h4 class="nav-subtitle">Subtitle</h4>
</li>
<li class="contact">
<div>
</div>
<a href="/contact.html"><button>联系</button></a>
<div>
</div>
</li>
</ul>
</header>
<main>
</main>
<footer></footer>
</body>
</html>
<!-- end snippet -->
英文:
You can prepend and append some HTML content before/after the contact button and specify their height in percentage:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html > body > header {
padding: 0 2rem;
}
.contact > div {
height: 35%;
}
header > ul.nav {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-top: 1rem;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
header > ul.nav li {
display: flex;
flex-direction: column;
}
header > ul.nav .nav-title-container {
text-align: left;
flex-grow: 1;
padding-right: 1rem;
padding-bottom: 1rem;
}
header > ul.nav .nav-title {
margin-top: 0;
margin-left: 0;
}
header > ul.nav .nav-title a {
color: var(--code);
}
header > ul.nav .nav-subtitle {
margin-bottom: .25rem;
margin-top: .25rem;
}
header > ul.nav .contact {
display: flex;
flex-direction: column;
padding-bottom: 1rem;
}
header > ul.nav .contact button {
margin-top: 0;
margin-bottom: 0;
background-color: transparent;
color: var(--code);
border: 1px solid var(--code);
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>First Last</title>
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
</head>
<body>
<header>
<ul class="nav">
<li class="nav-title-container">
<h1 class="nav-title"><a href="/index.html">First Last</a></h1>
<h4 class="nav-subtitle">Title</h4>
<h4 class="nav-subtitle">Subtitle</h4>
</li>
<li class="contact">
<div>
</div>
<a href="/contact.html"><button>contact</button></a>
<div>
</div>
</li>
</ul>
</header>
<main>
</main>
<footer></footer>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论