Question

我正在使用Thymeleaf呈现HTML页面。我有用户名，我在右上方的屏幕上显示。如果用户没有验证他的电子邮件，我想添加一个我显示的链接。我试图在括号中的用户名后显示链接。以下是HTML

的这一部分

<div th:if="${isLogged}" class="div-block-10">
    <div class="user_name" th:text="${user.getFirstName() + ' ' + user.getLastName()}">Your Name</div>
    <div th:if="${!user.isEmailValidated()}" class="div-block-13">
        <div class="email_confirmed">
            <a th:href="@{'/email/send/' + ${user.getToken()}}">Your email is not confirmed!</a>
        </div>
    </div>

用户名的CSS

.div-block-10 {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 98px 27px 0px auto;
    text-align: left;
}

完成CSS教程后，我掌握了基本知识，似乎我不了解显示属性。我希望以这种方式为用户保留CSS，并且链接的CSS是

.div-block-13{
    position: absolute;
    margin: 98px auto 0px auto;
    text-align: right;
}

我的逻辑是我希望它在相同的页面高度上，所以我保持98px和0px 也可以在右边对齐，如果用户名在左边移动更长，链接保持固定在右边。也尝试了所有位置属性，我的链接显示不正确 - 离开屏幕或不是' t在同一高度

Answer 1

＆＃13;

.div-block-10 {
  display: flex;
  align-items:center;
  height:100%;
  margin: 98px 0 0;
  text-align: left;
  justify-content:center;
}

＆＃13;

<div th:if="${isLogged}" class="div-block-10">
            <div class="user_name" th:text="${user.getFirstName() + ' ' + user.getLastName()}">Your Name</div>
            <div th:if="${!user.isEmailValidated()}" class="div-block-13">
                <div class="email_confirmed">
                    <a th:href="@{'/email/send/' + ${user.getToken()}}">Your email is not confirmed!</a>
                </div>
            </div>

＆＃13;

这就是你要找的东西

我刚刚使用了flex属性，justify-content：center;属性将使您的子div在水平居中对齐并对齐内容：center将div放在父div的垂直中心并且将彼此相邻。如果你想在你的div之间有一些差距，只需在div上给出填充或边距。如果您需要任何帮助，请告诉我。

如何将两个元素彼此相邻放置

1 个答案: