英文:
How to Align Text when screen width is lower in responsive web design
问题
当屏幕宽度减小时，文本被对齐到中心，但只到一定程度。文本从min-width为616px开始居中对齐，然而，当屏幕宽度降至615px以下时，文本不再居中对齐。
它看起来像这样：
如何在屏幕宽度等于或低于这个数字时仍将文本居中对齐？
@media screen and (max-width: 615px) {
/* 在这里添加以下样式以居中对齐文本 */
body {
text-align: center;
}
}
请将上述CSS代码添加到您的样式表中，以在屏幕宽度等于或低于615px时居中对齐文本。
英文:
When the width of the screen is lowered, the text is aligned to the center, however, only to an extent. The text is aligned to the center from the min-width of 616px, however, when the screen width is lowered below 615px, the text isn't aligned to the center anymore.
It looks like this:
How can I align the text to the centre even when the screen width is at this number and lower?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MedConnect User | Home</title>
<style media="screen">
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
body {
background-color: #f8d4a4;
font-family: Lora;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-around;
padding: 20px;
margin-top: 50px;
}
.nav-links h3 {
color: #704a1b;
}
.head {
font-size: 32px;
color: #614124;
margin-top: -20px;
margin-left: 50px;
cursor: pointer;
}
.menu {
display: flex;
gap: 1em;
font-size: 18px;
margin-left: 280px;
}
.menu li {
padding: 5px 12px;
cursor: pointer;
}
.profile-btn {
border-radius: 5px;
box-shadow: 0 1px 1px black;
padding: 10px 10px;
margin-top: -10px;
background-color: #60a159;
}
.profile-btn:active {
box-shadow: none;
}
@media screen and (max-width: 1201px) {
.navbar {
flex-direction: column;
align-items: center;
padding: 10px;
}
.navbar h1 {
margin-top: 10px;
font-size: 30px;
}
.menu {
flex-wrap: wrap;
justify-content: center;
margin-top: 30px;
margin-left: 10px;
}
.menu li {
padding: 10px 20px;
}
}
.index-first p {
color: #614124;
font-size: 40px;
}
.index-first h4 {
color: #704a1b;
font-size: 20px;
}
.index-first-text {
margin: 130px 120px;
display: flex;
flex-direction: column;
gap: 2em;
}
.consult-today-btn {
border-radius: 5px;
box-shadow: 0 1px 1px black;
padding: 25px 25px;
background-color: #60a159;
width: 176px;
cursor: pointer;
margin-top: 20px;
}
.consult-today-btn:active {
box-shadow: none;
}
@media screen and (max-width: 1201px) {
.index-first-text {
align-items: center;
margin: 50px;
}
}
@media screen and (max-width: 790px) {
.index-first-text p {
font-size: 30px;
}
.index-first-text h4 {
font-size: 15px;
}
}
</style>
</head>
<body>
<nav class="navbar">
<h1 class="head">MedConnect</h1>
<ul class="nav-links">
<div class="menu">
<li><h3>Consult</h3></li>
<li><h3>Resources</h3></li>
<li><h3>About</h3></li>
<li><h3>Contact</h3></li>
<li><h3 class="profile-btn" style="color: white;">Your Profile</h3></li>
</div>
</ul>
</nav>
<div class="index-first">
<div class="index-first-text">
<p><b>Get Remote Medical Assistance here.</b></p>
<h4>Find, Consult, Connect and Personalise your Needs Today.</h4>
<h3 class="consult-today-btn" style="color: white;">Consult Today</h3>
</div>
</div>
</body>
</html>
<!-- end snippet -->
答案1
得分: 0
将@media screen and (max-width: 790px)块中的代码.index-first-text p { font-size: 30px; }更改为包括：text-align: center;。
英文:
Change the code: .index-first-text p { font-size: 30px; } inside of the @media screen and (max-width: 790px) { block to include: text-align: center;
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
body {
background-color: #f8d4a4;
font-family: Lora;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-around;
padding: 20px;
margin-top: 50px;
}
.nav-links h3 {
color: #704a1b;
}
.head {
font-size: 32px;
color: #614124;
margin-top: -20px;
margin-left: 50px;
cursor: pointer;
}
.menu {
display: flex;
gap: 1em;
font-size: 18px;
margin-left: 280px;
}
.menu li {
padding: 5px 12px;
cursor: pointer;
}
.profile-btn {
border-radius: 5px;
box-shadow: 0 1px 1px black;
padding: 10px 10px;
margin-top: -10px;
background-color: #60a159;
}
.profile-btn:active {
box-shadow: none;
}
@media screen and (max-width: 1201px) {
.navbar {
flex-direction: column;
align-items: center;
padding: 10px;
}
.navbar h1 {
margin-top: 10px;
font-size: 30px;
}
.menu {
flex-wrap: wrap;
justify-content: center;
margin-top: 30px;
margin-left: 10px;
}
.menu li {
padding: 10px 20px;
}
}
.index-first p {
color: #614124;
font-size: 40px;
}
.index-first h4 {
color: #704a1b;
font-size: 20px;
}
.index-first-text {
margin: 130px 120px;
display: flex;
flex-direction: column;
gap: 2em;
}
.consult-today-btn {
border-radius: 5px;
box-shadow: 0 1px 1px black;
padding: 25px 25px;
background-color: #60a159;
width: 176px;
cursor: pointer;
margin-top: 20px;
}
.consult-today-btn:active {
box-shadow: none;
}
@media screen and (max-width: 1201px) {
.index-first-text {
align-items: center;
justify-items: center;
margin: 50px;
}
}
@media screen and (max-width: 790px) {
.index-first-text p {
text-align: center;
font-size: 30px;
}
.index-first-text h4 {
font-size: 15px;
}
}
<!-- language: lang-html -->
<nav class="navbar">
<h1 class="head">MedConnect</h1>
<ul class="nav-links">
<div class="menu">
<li>
<h3>Consult</h3>
</li>
<li>
<h3>Resources</h3>
</li>
<li>
<h3>About</h3>
</li>
<li>
<h3>Contact</h3>
</li>
<li>
<h3 class="profile-btn" style="color: white;">Your Profile</h3>
</li>
</div>
</ul>
</nav>
<div class="index-first">
<div class="index-first-text">
<p><b>Get Remote Medical Assistance here.</b></p>
<h4>Find, Consult, Connect and Personalise your Needs Today.</h4>
<h3 class="consult-today-btn" style="color: white;">Consult Today</h3>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论