时间戳

首页 > 解决方案 > 尝试在css中对齐具有不同长度的文本

html - 尝试在css中对齐具有不同长度的文本

问题描述

我正在尝试在两个不同的网格框中对齐具有不同长度的文本，这是我的问题的图像在此处输入图像描述

如您所见，底部的 a 标签没有对齐，因为左侧网格框中的描述文本较长。这是我的代码示例：

.project-list{
    margin: 2em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(455px, 1fr));
    gap: 5px; 

    text-align: center;
    align-items: center;
}

.project-list div{
    padding-left: 2em;
    padding-right: 2em;
    border: 5px solid #1e1e1e;
    height: 100%;
}
<section class="project-list">
            <div id="Aura Server Manager">     
                <br>     
                <img src="https://contenthub-static.grammarly.com/blog/wp-content/uploads/2018/05/how-to-ask-for-help.jpg" width="auto" height="200px"/>
                <h2>AURA SERVER MANAGER</h2>
                <b><p>Status: In Development</p></b>
                <p>Aura server manager is a discord bot I'm currently developing using discord.py rewrite, The bot has many features that allow you to control a server and view information on a range of things such as user and server info.</p>
                <a href="https://github.com/JacobA2000/Discord-Server-Moderation-Bot" target="_blank">View on GitHub</a>
            </div>
            
            <div id="Discord Bot Tutorial Series">
                <br>          
                <img src="https://contenthub-static.grammarly.com/blog/wp-content/uploads/2018/05/how-to-ask-for-help.jpg" width="auto" height="200px"/>
                <h2>Discord Bot Tutorial Series</h2>
                <b><p>Status: In Development</p></b>
                <p>The Discord Bot Tutorial Series is a Youtube playlist I'm producing to try and teach people how to make discord bots in Python.</p>
                <a href="https://www.youtube.com/playlist?list=PLYw1kd-gvJjNxXLe2UdaH2k5Iyl_pvkUH" target="_blank">View on YouTube</a>
            </div>
        </section>

标签： htmlcss

解决方案

实现此效果的一种方法是应用于position: absolute页脚链接：

a {
  position: absolute;
}

一旦你申请position: absolute 和坐标（在这种情况下bottom: 6px和left: 0），你需要明确声明，width而且最好明确声明display: block：

a {
  display: block;
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 100%;
}

要使absolute定位坐标成为与parent相关的坐标<div>，也有必要给出该<div>定位 - 在这种情况下，position: relative就足够了。

div {
  position: relative;
}

最后，您需要确保段落下方有一个合理的空间供绝对定位的链接占用：

p {
  margin-bottom: 24px;
}

工作示例：

.project-list{
    margin: 2em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(455px, 1fr));
    gap: 5px; 

    text-align: center;
    align-items: center;
}

.project-list div{
    padding-left: 2em;
    padding-right: 2em;
    border: 5px solid #1e1e1e;
    height: 100%;
}

div {
  position: relative;
}

p {
  margin-bottom: 24px;
}

a {
  display: block;
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 100%;
}
<section class="project-list">
            <div id="Aura Server Manager">     
                <br>     
                <img src="https://contenthub-static.grammarly.com/blog/wp-content/uploads/2018/05/how-to-ask-for-help.jpg" width="auto" height="200px"/>
                <h2>AURA SERVER MANAGER</h2>
                <b><p>Status: In Development</p></b>
                <p>Aura server manager is a discord bot I'm currently developing using discord.py rewrite, The bot has many features that allow you to control a server and view information on a range of things such as user and server info.</p>
                <a href="https://github.com/JacobA2000/Discord-Server-Moderation-Bot" target="_blank">View on GitHub</a>
            </div>
            
            <div id="Discord Bot Tutorial Series">
                <br>          
                <img src="https://contenthub-static.grammarly.com/blog/wp-content/uploads/2018/05/how-to-ask-for-help.jpg" width="auto" height="200px"/>
                <h2>Discord Bot Tutorial Series</h2>
                <b><p>Status: In Development</p></b>
                <p>The Discord Bot Tutorial Series is a Youtube playlist I'm producing to try and teach people how to make discord bots in Python.</p>
                <a href="https://www.youtube.com/playlist?list=PLYw1kd-gvJjNxXLe2UdaH2k5Iyl_pvkUH" target="_blank">View on YouTube</a>
            </div>
        </section>

推荐阅读