如何將flex中的文本與徽標對齊-有解無憂

我一直在嘗試復制 twitter 以進行練習，但我遇到了一個問題。我有一個 flex 行，它包含一個標志和一個文本。我想像對齊徽標一樣對齊文本。請參考下圖。如您所見，所有徽標均已對齊，但文本未對齊。我曾嘗試添加flex-direction: row;和指定，row-gap但沒有用。我也嘗試使用flex-direction: columnincase 它可以給我我想要的輸出但是一旦我輸入flex-direction:column徽標和文本移動到單獨的行。有沒有一種簡單的方法來對齊文本？此外，如果您運行代碼段并將滑鼠懸停在每個徽標上，您會注意到背景顏色發生變化，并且對于每個徽標，使用徽標撰寫的文本的填充都不相同。徽標的填充沒問題。如何設定邊距以使徽標和文本的填充保持不變？如何將 flex 中的文本與徽標對齊

在下面找到我的代碼。

*{
    margin: 0;
    padding: 0;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#container{
    width: 25%;
    height: 100vh;
    border-right: 1px solid rgb(0, 0, 0);
    position: absolute;
}
#logo{
    display: flex;
    font-size: 25px;
    padding-top: 10px;
    margin-left: 50px;
    margin-right: 10em;
}
.fab{
    cursor: pointer;
}
#navlinks{
    display: flex;
    margin-top: 1em;
}
#home{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    cursor: pointer;
    flex-direction: row;
}
.logohome{
    font-size: 20px;
    padding-left: 10px;
    flex: 50%;
}
.texthome{
    font-size: 20px;
    margin-left:2em;
    padding-right: 10px;
    flex: 50%;
}
#home:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#hashtag{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 9em;
    cursor: pointer;
    flex-direction: row;
    row-gap: 20px;
}
.hashlogo{
    font-size: 20px;
    padding-left: 10px;
}
.hashtext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}
#hashtag:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#notification{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 5.8em;
    cursor: pointer;
}
.notilogo{
    font-size: 20px;
    padding-left: 10px;
}
.notitext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}
#notification:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#messages{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 5.8em;
    cursor: pointer;
}
.msglogo{
    font-size: 20px;
    padding-left: 10px;
}
.msgtext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}
#messages:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#bookmark{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 5.8em;
    cursor: pointer;
}
.bkmrklogo{
    font-size: 20px;
    padding-left: 10px;
}
.bkmrktext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}
#bookmark:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#lists{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 5.8em;
    cursor: pointer;
}
.listslogo{
    font-size: 20px;
    padding-left: 10px;
}
.liststext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}
#lists:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#profile{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 5.8em;
    cursor: pointer;
}
.profilelogo{
    font-size: 20px;
    padding-left: 10px;
}
.profiletext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}
#profile:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#more{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 5.8em;
    cursor: pointer;
}
.r-1fmj7o5{
    height: 23px;
    width: 25px;
    margin-left: -4px;
    margin-top: 6px;
}
.morelogo{
    padding-left: 10px;
}
.moretext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}
#more:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#twtbtn{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 5.8em;
}
button{
    margin-top: 20px;
    height: 50px;
    width: 15em;
    border-radius: 30px;
    background-color: rgb(112, 112, 245);
    border: none;
    color: white;
    font-size: 1em;
    font-weight: 900;
    cursor: pointer;
}
button:hover{
    background-color: rgb(130, 130, 252);
}
#middlecontainer{
    height: 100vh;
    width: 50%;
    position: relative;
    margin-left: 22em;
    border-right: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="twitter.css">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous" />
</head>

<body>
    <div id="container">
        <div id="logo">
            <i class="fab fa-twitter"></i>
        </div>
        <div id="navlinks">
            <div id="home">
                <div class="logohome"><i class="fas fa-home"></i></div>
                <div class="texthome"><h4>Home</h4></div>
            </div>
        </div>
        <div id="hashtag">
            <div class="hashlogo"><i class="fas fa-hashtag"></i></div>
            <div class="hashtext"><h4>Explore</h4></div>
        </div>
        <div id="notification">
            <div class="notilogo"><i class="far fa-bell"></i></div>
            <div class="notitext"><h4>Notifications</h4></div>
        </div>
        <div id="messages">
            <div class="msglogo"><i class="far fa-envelope"></i></div>
            <div class="msgtext"><h4>Messages</h4></div>
        </div>
        <div id="bookmark">
            <div class="bkmrklogo"><i class="far fa-bookmark"></i></div>
            <div class="bkmrktext"><h4>Bookmark</h4></div>
        </div>
        <div id="lists">
            <div class="listslogo"><i class="far fa-list-alt"></i></div>
            <div class="liststext"><h4>Lists</h4></div>
        </div>
        <div id="profile">
            <div class="profilelogo"><i class="far fa-user"></i></i></div>
            <div class="profiletext"><h4>Profile</h4></div>
        </div>
        <div id="more">
            <div class="morelogo"><svg viewBox="0 0 24 24" aria-hidden="true" class="r-1fmj7o5 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><circle cx="17" cy="12" r="1.5"></circle><circle cx="12" cy="12" r="1.5"></circle><circle cx="7" cy="12" r="1.5"></circle><path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></g></svg></div>
            <div class="moretext"><h4>More</h4></div>
        </div>
        <div id="twtbtn">
            <div class="button"><button type="submit" value="Tweet">Tweet</button></div>
        </div>
    </div>
    <div id="middlecontainer">
        <nav id="navbar">
            <h1></h1>
        </nav>
    </div>
</body>

</html>

uj5u.com熱心網友回復：

我不明白你為什么使用不同的類名？！但是如果您為 div 設定特定的寬度大小，您的問題將得到解決

例如：

.logohome,.hashlogo{
  width:20px;
 }

uj5u.com熱心網友回復：

*{
    margin: 0;
    padding: 0;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#container{
    width: 25%;
    height: 100vh;
    border-right: 1px solid rgb(0, 0, 0);
    position: absolute;
}
#logo{
    display: flex;
    font-size: 25px;
    padding-top: 10px;
    margin-left: 50px;
    margin-right: 10em;
}
.fab{
    cursor: pointer;
}
#navlinks{
    display: flex;
    margin-top: 1em;
    flex-direction:column;
    min-width:250px;
}
#navlinks>div{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    cursor: pointer;
    flex-direction: row;
}
#navlinks>div:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.logohome{
    font-size: 20px;
    padding-left: 10px;
    width:20px;
}
.texthome{
    font-size: 20px;
    margin-left:2em;
    padding-right: 10px;
}
.hashlogo{
    font-size: 20px;
    padding-left: 10px;
    width:20px;
}
.hashtext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}
.notilogo{
    font-size: 20px;
    padding-left: 10px;
}
.notitext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}

.msglogo{
    font-size: 20px;
    padding-left: 10px;
}
.msgtext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}

.bkmrklogo{
    font-size: 20px;
    padding-left: 10px;
}
.bkmrktext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}

.listslogo{
    font-size: 20px;
    padding-left: 10px;
}
.liststext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}

.profilelogo{
    font-size: 20px;
    padding-left: 10px;
}
.profiletext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}

.r-1fmj7o5{
    height: 23px;
    width: 25px;
    margin-left: -4px;
    margin-top: 6px;
}
.morelogo{
    padding-left: 10px;
}
.moretext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}

#twtbtn{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 5.8em;
}
button{
    margin-top: 20px;
    height: 50px;
    width: 15em;
    border-radius: 30px;
    background-color: rgb(112, 112, 245);
    border: none;
    color: white;
    font-size: 1em;
    font-weight: 900;
    cursor: pointer;
}
button:hover{
    background-color: rgb(130, 130, 252);
}
#middlecontainer{
    height: 100vh;
    width: 50%;
    position: relative;
    margin-left: 22em;
    border-right: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="twitter.css">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous" />
</head>

<body>
    <div id="container">
        <div id="logo">
            <i class="fab fa-twitter"></i>
        </div>
        <div id="navlinks">
            <div id="home">
                <div class="logohome"><i class="fas fa-home"></i></div>
                <div class="texthome"><h4>Home</h4></div>
            </div>
        
        <div id="hashtag">
            <div class="hashlogo"><i class="fas fa-hashtag"></i></div>
            <div class="hashtext"><h4>Explore</h4></div>
        </div>
        <div id="notification">
            <div class="notilogo"><i class="far fa-bell"></i></div>
            <div class="notitext"><h4>Notifications</h4></div>
        </div>
        <div id="messages">
            <div class="msglogo"><i class="far fa-envelope"></i></div>
            <div class="msgtext"><h4>Messages</h4></div>
        </div>
        <div id="bookmark">
            <div class="bkmrklogo"><i class="far fa-bookmark"></i></div>
            <div class="bkmrktext"><h4>Bookmark</h4></div>
        </div>
        <div id="lists">
            <div class="listslogo"><i class="far fa-list-alt"></i></div>
            <div class="liststext"><h4>Lists</h4></div>
        </div>
        <div id="profile">
            <div class="profilelogo"><i class="far fa-user"></i></i></div>
            <div class="profiletext"><h4>Profile</h4></div>
        </div>
        <div id="more">
            <div class="morelogo"><svg viewBox="0 0 24 24" aria-hidden="true" class="r-1fmj7o5 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><circle cx="17" cy="12" r="1.5"></circle><circle cx="12" cy="12" r="1.5"></circle><circle cx="7" cy="12" r="1.5"></circle><path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></g></svg></div>
            <div class="moretext"><h4>More</h4></div>
        </div>
        </div>
        <div id="twtbtn">
            <div class="button"><button type="submit" value="Tweet">Tweet</button></div>
        </div>
    </div>
    <div id="middlecontainer">
        <nav id="navbar">
            <h1></h1>
        </nav>
    </div>
</body>

</html>

uj5u.com熱心網友回復：

我不確定這是否有幫助，但我會嘗試將 thetext和logodiv 標簽放在一個塊級元素中（我發現將它放在一個

標簽效果很好。）之后，您可以將它們對齊...

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344720.html

標籤：html css 弹性盒

上一篇：如何根據父級按比例調整子影像的大小？

下一篇：更改解析度時，html頁面上的元素會更改位置