我怎样才能更好地将这个按钮与中间的内容对齐？对我来说似乎偏离了中心：
Posted
技术标签:
【中文标题】我怎样才能更好地将这个按钮与中间的内容对齐？对我来说似乎偏离了中心：【英文标题】：How can I line up this button better with the content in the middle? It seems off center to me: 【发布时间】：2022-01-23 10:19:54 【问题描述】：按钮本身的margin-top 可能是答案，但我感觉不对。如果是希望答案将确认。将按钮降低一点的最佳解决方案是什么？
额外上下文的代码笔：https://codepen.io/AdanRod133/full/WNZEYJX
body
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
.container
background-color: coral;
display: grid;
grid-template-columns: 100px 300px 115px;
grid-row-gap: 1em;
justify-content: space-around;
align-items: center;
width: 50%;
height: 100px;
padding: 10px;
img
width: 100%;
height: 100%;
background-color: #2D8C9E;
.btn-learn
justify-self: center;
align-self: center;
height: 40px;
border: none;
border-radius: 10px;
width: 125px;
.body-title
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
.text-body
font-size: 16px;
grid-column: 3 / 5;
<div class="container">
<img src="" >
<div class="content">
<h3 class="body-title">
Startup
</h3>
<p class="text-body">Create Websites Online using the Startup Boostrap 5 builder</p>
</div>
<button class="btn btn-learn">Learn More <i class="fas fa-arrow-right"></i></button>
</div>【问题讨论】：
你能分享你想要的图片吗？ files.reallygoodemails.com/emails/… 我正在尝试使用 CSS 网格创建底部部分，以便更好地练习和理解网格 【参考方案1】：我已经将你的按钮包裹在一个弹性容器中，并使用了它的属性 align-items: center
我还做了一些样式更改
你已经在网格中创建了三列 100px 300px 和 100px
但分配了宽度为 125px 的按钮，这将导致样式错误
<div class="container">
<img src="" >
<div class="content">
<h3 class="body-title">
Startup
</h3>
<p class="text-body">Create Websites Online using the Startup Boostrap 5 builder</p>
</div>
<div class="button-container">
<button class="btn btn-learn">Learn More <i class="fas fa-arrow-right"></i></button>
</div>
</div>
body
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
.container
background-color: coral;
display: grid;
grid-template-columns: 100px 300px 125px;
grid-row-gap: 1em;
justify-content: space-between;
align-items: center;
width: 40%;
height: 90px;
padding: 5px 20px;
img
width: 100%;
height: 100%;
background-color: #2D8C9E;
.btn-learn
/* justify-self: center; */
/* align-self: center; */
height: 40px;
border: none;
border-radius: 10px;
width: 100%;
/* margin-top: 16px; */
.body-title
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
.text-body
font-size: 16px;
grid-column: 3 / 5;
.button-container
height: 100%;
margin: 0;
padding: 0;
display: flex;
align-items:center
【讨论】：
【参考方案2】：您应该以更好的方式重组您的div。例如，我认为您正在寻找这样的内容框：
如果您是前端 Web 开发新手，我建议您使用 Bootstrap。
这是您的 Bootstrap-5 代码外观的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
<style>
body
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
img
width: 100%;
height: 100%;
background-color: #2d8c9e;
.btn-learn
justify-self: center;
align-self: center;
height: 40px;
border: none;
border-radius: 10px;
width: 125px;
.body-title
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
.text-body
font-size: 16px;
grid-column: 3 / 5;
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-2">
<img src="" />
</div>
<div class="col-8">
<h3 class="body-title">Startup</h3>
<p class="text-body">Create Websites Online using the Startup Boostrap 5 builder</p>
</div>
<div class="col-2 d-flex flex-column justify-content-center">
<button class="btn btn-learn">Learn More <i class="fas fa-arrow-right"></i></button>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>【讨论】：
【参考方案3】：这是css 文件。
body
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
.container
background-color: coral;
display: flex;
flex-wrap:no-wrap;
justify-content: space-between;
align-items: center;
width: 80%;
height: 100px;
padding: 10px;
img
width: 100px;
height: 100px;
background-color: #2D8C9E;
.content
padding:0% 2%;
.body-title
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
.text-body
font-size: 16px;
grid-column: 3 / 5;
.btn-learn
height: 40px;
border: none;
border-radius: 10px;
width: 125px;
还有这样的html文件
<div class="container">
<img src="" >
<div class="content">
<h3 class="body-title">
Startup
</h3>
<p class="text-body">
Create Websites Online using the Startup Boostrap 5 builder
</p>
</div>
<button class="btn btn-learn">
Learn More
<i class="fas fa-arrow-right"></i>
</button>
</div>
【讨论】：
【参考方案4】：结果如下：https://codepen.io/AdanRod133/full/WNZEYJX
.btn-learn
position: relative;
height: 40px;
border: none;
border-radius: 5px;
background-color: #00A57F;
color: #D8D7DF;
height: 2.5em;
padding: 10px 25px;
outline: none;
cursor: pointer;
display: inline-block;
justify-self: end;
transition: all .2s ease-in-out;
我摆脱了宽度并将按钮设置为内联块。然后添加一些填充。
我想做一些 css-grid 只是为了得到更多的练习。 使用填充以及添加网格间隙允许项目 坐在我想让他们坐的地方。
【讨论】：
以上是关于我怎样才能更好地将这个按钮与中间的内容对齐？对我来说似乎偏离了中心：的主要内容，如果未能解决你的问题，请参考以下文章
Latex中有三个数学公式，都比较长。怎样才能使其剧中或居左对齐？