无法使多个按钮同时水平和垂直对齐

时间：2017-05-13 17:58:55

标签： html css

我一直在尝试让多个按钮在页面中央垂直和水平对齐。这就是我的目标：aligned buttons

但是，我只是让图像居中，但是它们没有水平对齐。或者，我让他们水平对齐，但他们没有居中。这是我在按钮上使用的代码。

//used to remove the transition item so that the image changes. This is necessary to show image transition on load. 
$(".hoverImage").removeClass("transitionHoverImage")

//sets welcome text opacity to 0 so it can be faded in
$('.welcomeText').css("opacity", 0);
//wait a second before attempting to fade text in. Second parameter of "fadeTo" sets opacity to 1 (100%)
$('.welcomeText').delay(1400).fadeTo(800, 1);

$('.portfolioBtn').css("opacity", 0);
$('.portfolioBtn').delay(1400).fadeTo(800, 1);

$('.resumeBtn').css("opacity", 0);
$('.resumeBtn').delay(1400).fadeTo(800, 1);
body {
    font-family: Oswald, Baloo, Calibri, sans-serif;
    background: black url(../images/background.jpg) no-repeat center;
    height: 3600px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.about {
    display: block;
    text-align: center;
    background-color: #ffffff rgba(255, 255, 255, 0.5);
    position: relative;
    width: 904px;
    padding: 33px 27px 34px;    
    z-index: 1;
}
.logo {
    position: fixed;
    left: .25em;
    top: 3%;
    height: 210px;
    width: 150px;
    z-index: 1;
}

/* you want to set up a transform, translate for this transform: translate (0, -100px); and  */
.hoverImage {
    position: relative;
    z-index: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.transitionHoverImage {
    transform: translate(0px, 200px);
}

.door {
    transition: transform 1.5s ease-out;
}

.welcomeText {
    position: relative;
    top: 120px;
    z-index: 1;
    font-size: 7em;
    color: white;
    text-align: center;
}

.centerBtns {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -700px;
    text-align: center;   
    width: 15%;
    margin: 0 auto;
    font-size: 2em;
    color: black;
    background-color: #fdc552;
    border-radius: 1em;
    border-color: #805300;
    box-shadow: 0px 10px 15px black;
    padding: 1.5em 2.8em;
    z-index: 2;
}

.resumeBtn {
   
}
.portfolioBtn {}

/* why is this so finnicky?!?!?!?!?!?!?!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!???????????
/* dropdown menu code starts here */
/*this is the code for the revealed box and the dropshadow of box */
.dropdown-content {
    display: none;
    position: fixed;
    right: 2em;
    top:3%;
    background-color:#343434;
    min-width: 1em;
    border-radius: 1em;
    box-shadow: .25em 0em .5em #343434;
    padding: 0em;
    z-index: 1;
}

/* this is the highlight color when you hover over an item */
.dropdown-content a:hover {
    background-color: dimgray;
}

/*w3 said I needed this code, so I put it in */
.dropdown:hover .dropdown-content{
    display:block;
}

/*revealed dropdown style */
.dropdown-content a {
    color: lightgray;
    border-radius: 6px;
    border-style: solid;
    border-color: #343434;
    background-color: #343434;
    font-weight: bold;
    text-align: center;
    padding: .5em;
    text-decoration: none;
    display: block;
}
/*menu button for dropdown*/
.menu-button {
    position: fixed;
    right: 2em;
    top:3%;
    font-weight: bold;
    font-size: 1em;
    color: lightgray;
    padding: 1em;
    background-color: #343434;
    border-color: #343434;
    border-style: solid;
    border-width: 2px;
    border-radius: 6px;
    z-index: 1;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<!-- favicon links-->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">



<title>DenneyDesign</title>
<!-- CSS Stylesheets -->
<link href="css/style.css" rel="stylesheet">
<ling href="css/animate.css" rel="stylesheet">

<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Baloo|Oswald" rel="stylesheet"> 

</head>

<body>
<!--Menu Bar-->
    <div class="dropdown">
         <button class="menu-button">MENU</button>
         <div class="dropdown-content">
             <a href="index.html">HOME</a>
             <a href="#about">ABOUT</a>
             <a href="#artwork">ARTWORK</a>
             <a href="#resume">RESUME</a>
             <a href="#social">SOCIAL</a>
</div>
    </div>
<!--Logo-->    
<div>
<img class ="logo" src="images/logo.png">
</div>

<!--Welcome Text-->
<div>
    <header>
    <h1 class='welcomeText'>WELCOME</h1>
</header>

<!--Hover Image-->
<img class="door hoverImage transitionHoverImage" src="images/door_slider.png">

</div>

<!--Buttons-->
<div>
    <button class="centerBtns"><b>PORTFOLIO</b></button><button class="centerBtns resumeBtn"><b>RESUME</b></button>
</div>

<!--About-->
<div>
    <header>
    <h1><a name="about">ABOUT</a></h1>
    </header>
</div>

</body>


<!--javascript-->
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</html>

感谢您的帮助！

4 个答案:

答案 0 :(得分：2)

Flexbox可以轻松完成此任务。在父级上使用display: flex; justify-content: center; align-items: center;。

＆＃13;
＆＃13; 
div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;
  background: black;
}
＆＃13; 
<div>
  <button>button</button>
  <button>button</button>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

使用flexbox确实是最简单的解决方案，但万一我重新安排了你的CSS：

＆＃13;
＆＃13; 
.centerBtns {
    position: relative;
    text-align: center;   
    color: black;
    background-color: #fdc552;
    border-radius: 1em;
    border-color: #805300;
    box-shadow: 0px 10px 15px black;
    z-index: 2;
    
    width: 40%;
    font-size: 1.5em;
    padding: 1.5em;
    line-height: 3em;
    }
＆＃13; 
<div>
    <button class="centerBtns"><b>PORTFOLIO</button><button class="centerBtns resumeBtn">RESUME</b></button>
</div>
＆＃13;
＆＃13;
＆＃13;

如果您希望两个按钮具有相同的宽度，请确保宽度％足够大以包含文本。或者，如果不是仅删除width属性并使用最后3个属性进行调整以获得所需的结果。

答案 2 :(得分：0)

您提供的代码存在一些问题，我认为这可能会使问题难以解决。

您发布的内容的精简版显示了如何通过相对定位和flexbox的组合实现这一目标。enter image description here 

body {
  height: 100vh;
  background-size: auto auto;
  background-color: red;
  position: relative;
 }

.nav {
  border: solid 1px blue;
  background: rgba(0,0,255,0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 750px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav__button {
 font-size: 44px;
 margin: 50px;
 width: 250px;
 padding: 30px 0;
}
<div class="nav">
  <button class="nav__button">Portfolio</button>
  <button class="nav__button">Resume</button>
</div>

上面的Plunker镜像：http://plnkr.co/edit/LwJyRFFpSE9dj4KtCuw6

答案 3 :(得分：0)

您可以使用FlexBox。如果您有几个按钮，则可以设置＆＃34;对齐内容＆＃34; property as＆＃34; center＆＃34;，并为每个按钮设置一个边距。另一方面，如果你有很多按钮，你可以设置＆＃34;对齐内容＆＃34; as＆＃34; space-around＆＃34;，并删除边距。

https://jsfiddle.net/pablodarde/nhxukt5c/

<强> HTML 

<div class='buttons'>
    <button>
      <b>PORTFOLIO</b>
    </button>
    <button>
      <b>RESUME</b>
    </button>
</div>

<强> CSS 

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.buttons {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.buttons button {
  display: inline-flex;
  margin: 5px;
}
相关问题
最新问题