保持徽標左上角和中心的UI元素的CSS

header { 
 
    display: flex; 
 
    paddingBottom: 8px; 
 
    paddingLeft: 5px; 
 
} 
 

 
.logo { 
 
    margin-top: 5px; 
 
    height: 40px;; 
 
    padding-left: 10px; 
 
} 
 

 
ul { 
 
    display: flex; 
 
    list-style-type: none; 
 
    font-size: 15px; 
 
    justify-content: center; 
 
    font-weight: 100; 
 
} 
 

 
li { 
 
    padding-right: 10px; 
 
}

<header> 
 
    <img src={nicklogo} className="logo" alt="logo" /> 
 
    <ul> 
 
    <li>Me</li> 
 
    <li>Projects</li> 
 
    <li>Skills</li> 
 
    </ul> 
 
    </header>

我有了一個img標籤和UL標籤機智3 li元素的頭部元素。我在左下角的img標籤中有徽標。我想將3個li元素放置在標題元素的中心。

我也想在人們在不同尺寸的屏幕上閱讀時進行縮放。

來源

2016-11-20 Coder_Nick

的回答已經包含了你的代碼，所以我不認爲這是確定由我來更新這個問題，但你可以離開反應掉它，因爲這是一個CSS問題。因此，不用'src = {nicklogo}'，你可以寫一些類似'src =「/ logo.png」'的東西。 – silvenon

這個例子恰好居中。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
header { 
 
    display: flex; 
 
    padding-Bottom: 8px; 
 
    padding-Left: 0px; 
 
    width: 100%; 
 
} 
 

 
.logo { 
 
    margin-top: 5px; 
 
    height: 40px;; 
 
    padding-left: 10px; 
 
} 
 

 
.center { 
 
    width: 100%; 
 
    margin-left: -50px; 
 
} 
 

 
ul { 
 
    display: flex; 
 
    list-style-type: none; 
 
    font-size: 15px; 
 
    justify-content: center; 
 
    font-weight: 100; 
 
    position: relative; 
 
    line-height: 50px; 
 
} 
 

 
li { 
 
    padding-right: 10px; 
 
}

<header> 
 
    <img src={nicklogo} class="logo" alt="logo" /> 
 
    <div class="center"> 
 
    <ul> 
 
     <li>Me</li> 
 
     <li>Projects</li> 
 
     <li>Skills</li> 
 
    </ul> 
 
    </div> 
 
</header>

強調文本

來源

2016-11-20 02:59:58 Syden

試試這個

header { 
 
    display: flex; 
 
    paddingBottom: 8px; 
 
    paddingLeft: 5px; 
 
} 
 
.logo { 
 
    margin-top: 5px; 
 
    height: 40px; 
 
    
 
    padding-left: 10px; 
 
} 
 
ul { 
 
    margin: auto; 
 
display:block; 
 

 
    list-style-type: none; 
 
    font-size: 15px; 
 
    justify-content: center; 
 
    font-weight: 100; 
 
} 
 
li { 
 
    display: inline; 
 
    padding-right: 10px; 
 
}

<header> 
 
    <img src={nicklogo} className="logo" alt="logo" /> 
 
    <ul> 
 
    <li>Me</li> 
 
    <li>Projects</li> 
 
    <li>Skills</li> 
 
    </ul> 
 
</header>

來源

2016-11-20 02:38:19

保持徽標左上角和中心的UI元素的CSS

回答

相關問題