在全屏图像上对齐按钮

我需要帮助将我的按钮对齐到屏幕中间（水平和垂直）。该按钮位于图像上方。我知道在这里有类似的问题，但我尝试了所有的建议，似乎没有任何工作。我认为这可能是因为我的按钮位于宽度和高度为100％的图像之上，换句话说，图像是占据整个页面的全屏图像。在全屏图像上对齐按钮

我的按钮位于屏幕的左上角。

body { 
 
    width:100%; 
 
    height:100%; 
 
    background-image: url("space.jpg"); 
 
} 
 

 
.button { 
 
    margin:auto; 
 
    display:block; 
 
}

<div class="wrapper"> 
 
    <button class="button">Button</button> 
 
</div> 
 

 
<img src="space.jpg">

来源

2016-12-24 mdlz

请将此代码添加到您的CSS：

button { 
    left: 0; 
    margin: 0 auto; 
    position: absolute; 
    right: 0; 
    top: 50%; 
} 

img { 
    width: 100%; 
}

希望它会为你工作

感谢

来源

2016-12-24 04:10:48

更新：

与fixed dimensions创建一个<div>并添加背景它。
根据您的需要调整<div>的尺寸。
把你的按钮内部是<div>
位置的按钮内部的<div>并给它position:absolute - 相对于其父
使用transform财产以及top/left/right/bottom

/* relevant starts here CSS */ 
 

 
.mycontent { 
 
    width: 100vw; 
 
    max-width: 100% 
 
} 
 
.button { 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    position: absolute; 
 
    background: #fff; 
 
    font-size: 1.2em; 
 
    border: 1px solid #777; 
 
    padding: 0 .6em; 
 
    color: #000; 
 
    opacity: .6; 
 
} 
 
.button:hover { 
 
    opacity: 1; 
 
    cursor: pointer; 
 
} 
 
.topcontent { 
 
    height: 100vh; 
 
    width: 2560px; 
 
    max-width: 100%; 
 
    background: url(http://supersocl.com/wp-content/uploads/2016/09/2560X1440-Wallpaper-Elegant-6G0.jpg); 
 
    background-size: cover; 
 
} 
 
.othercontent { 
 
    background: #010101; 
 
    padding: 20px 40px 20px 40px; 
 
} 
 

 
/* irrelevant starts here CSS */ 
 

 
body { 
 
    max-width: 100%; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    color: #999; 
 
} 
 
body::-webkit-scrollbar { 
 
    width: 0; 
 
    height: 0; 
 
} 
 
p { 
 
    margin: 0 auto; 
 
    padding: 20px; 
 
    text-align: justify; 
 
    text-justify: inter-word; 
 
}

<body> 
 
    <div class="mycontent"> 
 
    <div class="topcontent"> 
 
     <button class="button">Menu</button> 
 
    </div> 
 
    <div class="othercontent"> 
 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
 
     voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> 
 

 
     <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem 
 
     ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p> 
 

 
     <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
 

 
     <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
 
     mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas 
 
     assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et vo</p> 
 
    </div> 
 
    </div> 
 
</body>

来源

2016-12-24 04:11:03

试试这个：

.wrapper { 
 
    width:100%; 
 
    height:100vh; 
 
    background-image: url("https://unsplash.it/800/400/"); 
 
    background-repeat:no-repeat; 
 
    background-position:center; 
 
    background-size:cover; 
 
    display:block; 
 
} 
 

 
.button { 
 
    width:100px; 
 
    position: absolute; 
 
    bottom:50%; 
 
    left:50%; 
 
}

<div class="wrapper"> 
 
    <button class="button">Button</button> 
 
</div>

来源

2016-12-24 04:23:41 Momin

试试这个：

body { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

img { 
    width: 100%; 
} 

button{ 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    text-align: center; 
    background: #000; 
    padding: 6px 12px; 
    border: solid 1px #000; 
    border-radius: 5px; 
    color: #fff; 
    min-width: 150px; 
}

来源

2016-12-24 04:33:21 Sangrai

你可以做，使用CSS3 弹性盒概念。

绝对中心物业

集父母（这里是包装）：display:flex;
然后将孩子（在这里它的按钮）：margin:auto;

它将被定位在绝对中心。我已经添加了下面的代码片段。

html,body { 
 
    height:100%; 
 
    width:100%; 
 
} 
 
.wrapper { 
 
    display:flex; 
 
    align-items:center; 
 
    width:100%; 
 
    height:100%; 
 
    background-image: url("https://i.stack.imgur.com/wwy2w.jpg"); 
 
    background-repeat:no-repeat; 
 
    background-size:cover; 
 
} 
 

 
.button { 
 
    width:100px; 
 
    margin:auto; 
 
}

<div class="wrapper"> 
 
    <button class="button">Button</button> 
 
</div>

来源

2016-12-24 05:07:27

这工作！谢谢！ :)。介意解释我最初做错了什么？另外，如何让我的句子跨越按钮而不是换行符？（例如:)：https://gyazo.com/fe41c1c67fade0779020112fdd71262a – mdlz

@mdlz不要忘记打勾，如果它有用，在你的代码中你有** margin：auto; **，但大多数时候它让你的按钮水平居中但不垂直 –

我不能打勾它，我没有我的网站了。我只是从Sublime Text运行代码 – mdlz

在全屏图像上对齐按钮

回答

相关问题