无法移动文字按钮

Question

我正在创建一个带有标题背景图片的菜单。现在我创建了一个文本按钮（绿色Aphryv的东西），但我无法移动它。我试过：margin，text-align。 你可以看到盒子现在是我想要的。

我的代码：

＆＃13;

＆＃13;

.full-header {
    width: 100%;
    height: 500px;
    background: url(img/header-bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
    
.header {
    width: 100%;
    height: 60px;
    background: rgba(0, 0, 0, 0.45);
}
    
.nav {
    text-align: center;
}
    
.nav ul li {
    display: inline;
    padding: 20px 10px;
    line-height: 55px;
}
    
.nav ul li a {
    text-decoration: none;
    color: #fff;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 35px;
}
    
.button {
    font-family: Arial;
    color: #ffffff;
    font-size: 30px;
    background: #8edd63;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

＆＃13;

<div class="full-header">
    <div class="header">
        <div class="nav">
    	    <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">Work</a></li>
               <li><a href="#">About Me</a></li>
               <li><a href="#">Contact</a></li>
           </ul>
       </div>
    </div>
    <div class="button">Aphryv</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是代码：

display: inline-block;

您需要将其删除，为文本指定宽度，然后使用边距来定位它。

实施例： https://jsfiddle.net/nc5jfd2c/

Answer 2

将以下更改应用于.button课程（请参阅JSfiddle here）：

使用以下内容水平居中按钮：

display: block; 
margin: auto;
width: 100px;

添加以下内容以垂直居中按钮：

position: relative;
top: 50%;
transform: translateY(-50%);

你的风格将成为：

.button {
    font-family: Arial;
    color: #ffffff;
    font-size: 30px;
    background: #8edd63;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    text-align: center;
    display: block;
    margin: auto;
    width: 100px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Answer 3

你可以将div文本包装在一个div中，该div位于相对位置，并使div文本位置相对于包装器相对div绝对，这将是HTML的外观 -

 <div style="position:relative">
        <div class="button">Aphryv</div>
    </div>

并按以下方式更改按钮类

.button {
        font-family: Arial;
        color: #ffffff;
        font-size: 30px;
        background: #8edd63;
        padding: 10px 20px 10px 20px;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        position:absolute;
        left:50%;
        margin-right: -50%;
        margin-left:-50px;
        margin-top:60px;
    }

这会将文本div wrt移动到相对div

Answer 4

我用@AustinCollins的代码修复它

.button {
    position: relative;
    font-family: Arial;
    color: #ffffff;
    font-size: 30px;
    background: #8edd63;
    border: 8px solid #C1E8AA;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    text-align: center;
    margin: 256px auto;
    width: 100px;
}