水平排列标题中的文本

我想在我的标题中垂直和水平对齐我的文本。它只是停留在标题的最底部。

我似乎无法从标题底部移动文本。我有0填充在我的身体。

任何帮助，非常感谢。

HTML

<body> 
<div class="background"> 
<div class="header"> 
<div class="menu"> 
    <ul class="nav"> 
     <li id="nav-products"><a href="#">Products</a></li> 
     <li id="nav-contact"><a href="#">Contact</a></li> 
     <li id="nav-about"><a href="#">About</a></li> 
    </ul> 
    <div class="logo"> 
     <img src="images/Logo sketch.png"> 
    </div> 
</div> 
</body>

CSS

.nav { 
     box-sizing: border-box; 
     text-decoration: none; 
     font-family: 'Montserrat', sans-serif; 
     position: relative; 

    } 

    .header { 
     background-color: white; 
     padding-top: 100px; 
     background-size: cover; 
     background-position: center; 
     position: relative; 


    } 

    ul { /*text header*/ 
     list-style: none; 
     position: absolute; 
     text-align: center; 
     border: 2px dashed #f69c55; 

    } 

    ul li { 
     outline: 0 none; 
     display: inline-block; 
     padding: 0 2.6em; 
     margin: 0; 

    } 

    a { 
     color: #111; 
     font-size: 16px; 
     font-style: normal; 
     font-weight: 100; 
    } 
    a:link { 
     text-decoration: none; 
    } 
    a:visited { 
     text-decoration: none; 
     color: black; 
    } 
    a:hover { 
     text-decoration: none; 
     color: black; 
    } 
    a:active { 
     text-decoration: none; 
     color: black; 
    }

来源

2017-09-05 SubZeroFish

请创建一个演示发生了什么的小提琴 –

所以我编辑我的答案来解决你的情况：

在你的情况，如果需要到中心垂直&水平绝对定位元素，你的肩膀d使用顶部/底部和左/右偏移量。

中心水平&垂直：

ul{ 
    position: absolute; 
    /* Add top & left offset */ 
    top: 50%; 
    left: 50%; 
    /* Transform your element to perfectly center it */ 
    transform: translate(-50%, -50%); 
}

中心水平：

ul{ 
    position: absolute; 
    /* Add left offset */ 
    left: 50%; 
    /* Transform your element to perfectly center it */ 
    transform: translateX(-50%); 
}

中心垂直：

ul{ 
    position: absolute; 
    /* Add top offset */ 
    top: 50%; 
    /* Transform your element to perfectly center it */ 
    transform: translateY(-50%); 
}

来源

2017-09-05 14:39:01

感谢您的回复。我应该从ul里删除调整吗？我会试一试。 – SubZeroFish

如果您使用flexbox，则不需要使用ul'position：absolute;'。那么你将需要更新你的ul/li风格，这取决于你需要什么@SubZeroFish –

如果我在ul“bottom：50％”添加。它将文本放置在标题之外。它有可能将它限制在标题中的50％？谢谢你的帮助。 – SubZeroFish

水平排列标题中的文本

回答

相关问题