如何垂直居中HTML元素

时间：2016-12-21 09:59:13

标签： html css

我试图垂直居中两个箭头。一个在左边，一个在右边。最终目标是尝试将HTML和javascript内容的滑块作为学习工具。我似乎无法让箭头垂直居中。以下是我正在使用的代码。我尝试过垂直对齐和顶部：50％，但这似乎不起作用。谢谢。

＆＃13;
＆＃13; 
#wrapper {
  width: 800px;
  height: 400px;
  background-color: black;
}
#slide1 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#slide2 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#slide3 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#slide4 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#slide5 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#right-button {
  color: white;
  float: right;
  padding-right: 2px;
  font-size: 5em;
}
#left-button {
  color: white;
  float: left;
  padding-left: 2px;
  font-size: 5em;
}
＆＃13; 
<h3>Presentation Slider</h3>
<div id="wrapper">
  <div id="left-button"><strong>&lt;</strong>
  </div>
  <!--
	<div id="slide1"></div>
	<div id="slide2"></div>
	<div id="slide3"></div>
	<div id="slide4"></div>
	<div id="slide5"></div>
	-->
  <div id="right-button"><strong>&gt;</strong>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

14 个答案:

答案 0 :(得分：0)

在这里 - flexbox是现在最简单的方法

＆＃13;
＆＃13; 
#wrapper {
  background-color: #eee;
  display:flex;
  height: 200px;
  justify-content: space-between;
  align-items: center;
}
＆＃13; 
<body>
    <h3>Presentation Slider</h3>
    <div id="wrapper">
        <div id="left-button"><strong>&lt;</strong></div>
        <!--
        <div id="slide1"></div>
        <div id="slide2"></div>
        <div id="slide3"></div>
        <div id="slide4"></div>
        <div id="slide5"></div>
        -->
        <div id="right-button"><strong>&gt;</strong></div>
    </div>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

试试这个：

#wrapper{
  position:relative;
}

#left-button, #right-button{
  position:absolute;
  top:50%;
}

#left-button{
  left : 0;
}

#left-button{
  right : 0;
}

答案 2 :(得分：0)

哟可以这样做：

＆＃13;
＆＃13; 
#wrapper {
  width: 800px;
  height: 400px;
  background-color: black;
  position: relative;
}
#slide1 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#slide2 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#slide3 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#slide4 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#slide5 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#right-button {
  color: white;
  float: right;
  padding-right: 2px;
  font-size: 5em;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
#left-button {
  color: white;
  float: left;
  padding-left: 2px;
  font-size: 5em;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
＆＃13; 
<h3>Presentation Slider</h3>
<div id="wrapper">
  <div id="left-button"><strong>&lt;</strong>
  </div>
  <!--
        <div id="slide1"></div>
        <div id="slide2"></div>
        <div id="slide3"></div>
        <div id="slide4"></div>
        <div id="slide5"></div>
        -->
  <div id="right-button"><strong>&gt;</strong>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

＆＃13;
＆＃13; 
#wrapper{
    width: 800px;
    height: 400px;
    background-color: black;
  position:relative;
}
#slide1{
    width: 700px;
    height: 350px;
    background-color: green;
}
#slide2{
    width: 700px;
    height: 350px;
    background-color: green;
}
#slide3{
    width: 700px;
    height: 350px;
    background-color: green;
}
#slide4{
    width: 700px;
    height: 350px;
    background-color: green;
}
#slide5{
    width: 700px;
    height: 350px;
    background-color: green;
}
#right-button{
    color: white;
    float: right;
    padding-right: 2px;
    font-size: 5em;
  position:absolute;
  top:50%;
  right:0;
  transform: translateY(-50%)
}
#left-button{
    color: white;
    float: left;
    padding-left: 2px;
    font-size: 5em;
  position:absolute;
  top:50%;
  left:0;
  transform: translateY(-50%)
}
＆＃13; 
<h3>Presentation Slider</h3>
    <div id="wrapper">
        <div id="left-button"><strong>&lt;</strong></div>
        <!--
        <div id="slide1"></div>
        <div id="slide2"></div>
        <div id="slide3"></div>
        <div id="slide4"></div>
        <div id="slide5"></div>
        -->
        <div id="right-button"><strong>&gt;</strong></div>
    </div>
＆＃13;
＆＃13;
＆＃13;

我使用相对和绝对定位方法垂直居中两个箭头。

答案 4 :(得分：0)

您的样式表未正确连接。将其移至标记<head> enter image description here

答案 5 :(得分：0)

试试这个。

#wrapper{
    position: relative;
}
#right-button,
#left-button{
    position: absolute;
    top: 50%;
    height: 50px;
    margin-top: -25px; /* height/2 */
}
#right-button{
    color: white;
    float: right;
    padding-right: 2px;
    font-size: 5em;
    right: 0;
}
#left-button{
    color: white;
    float: left;
    padding-left: 2px;
    font-size: 5em;
    left: 0;
}

答案 6 :(得分：0)

与translate一起玩，这个技巧很酷的是你不关心#wrapper的维度，因为它总是需要中心：）

这是一个小提琴：https://jsfiddle.net/jjLpf584/：）

#wrapper{
   position: relative;
}

#left-button {
 position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0%, -50%);
}
#right-button {
 position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0%, -50%);
}

答案 7 :(得分：0)

你可以使用flex-box概念实现这个目标

将以下css添加到您的代码中

#wrapper{
  display: flex;
  align-items:center;
  justify-content: space-between;
  }


#wrapper{
    width: 800px;
    height: 400px;
    background-color: black;
}
#slide1{
    width: 700px;
    height: 350px;
    background-color: green;
}
#slide2{
    width: 700px;
    height: 350px;
    background-color: green;
}
#slide3{
    width: 700px;
    height: 350px;
    background-color: green;
}
#slide4{
    width: 700px;
    height: 350px;
    background-color: green;
}
#slide5{
    width: 700px;
    height: 350px;
    background-color: green;
}
#right-button{
    color: white;
    float: right;
    padding-right: 2px;
    font-size: 5em;
}
#left-button{
    color: white;
    float: left;
    padding-left: 2px;
    font-size: 5em;
}

#wrapper{
  display: flex;
  align-items:center;
  justify-content: space-between;
  }
<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles/stylesheet.css">
<head>
  <style>
  </style>

  <script src="js/jquery-1.12.3.min.js"></script>
  <script src="js/jquery.slides.min.js"></script>

</head>
<body>
    <h3>Presentation Slider</h3>
    <div id="wrapper">
        <div id="left-button"><strong>&lt;</strong></div>
        <!--
        <div id="slide1"></div>
        <div id="slide2"></div>
        <div id="slide3"></div>
        <div id="slide4"></div>
        <div id="slide5"></div>
        -->
        <div id="right-button"><strong>&gt;</strong></div>
    </div>
</body>

答案 8 :(得分：0)

#wrapper {
  width: 80%;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  border:1px solid #dedede;
}

.slide {
  display: none;
  width: 100%;
  height: 250px;  
}

.slide.active {
  display: block;
}

#left-button {
  position: absolute;
  left: 0;
  top: 50%;
}

#right-button {
  position: absolute;
  right: 0;
  top: 50%;
}

    <h3>Presentation Slider</h3>
<div id="wrapper">
  <div id="left-button"><strong>&lt;</strong></div>

  <div id="slide1" class="slide active">Slide 1 content</div>
  <div id="slide2" class="slide">Slide 2 content</div>
  <div id="slide3" class="slide">Slide 3 content</div>
  <div id="slide4" class="slide">Slide 4 content</div>
  <div id="slide5" class="slide">Slide 5 content</div>

  <div id="right-button"><strong>&gt;</strong></div>
</div>

Fiddle Demo

答案 9 :(得分：0)

你也可以尝试这个css代码

#right-button {
    color: white;
    float: right;
    padding-left: 2px;
    font-size: 16px;
    position: relative;
    top: 45%;
    right:10px;
}

#left-button {
    color: white;
    float: left;
    padding-left: 2px;
    font-size: 16px;
    position: relative;
    top: 45%;
    left:10px;
}

答案 10 :(得分：0)

只需将LocateRegistry.createRegistry(ip, port); 与wrapper和relative与button放在一起，左边一个按钮，右边一个按钮。

absolute
#wrapper {
  width: 800px;
  height: 400px;
  background-color: black;
  position: relative;
}
#slide1 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#slide2 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#slide3 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#slide4 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#slide5 {
  width: 700px;
  height: 350px;
  background-color: green;
}
.arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  display: table;
}
#right-button {
  color: white;
  float: right;
  padding-right: 2px;
  font-size: 5em;
  right: 0;
}
#left-button {
  color: white;
  float: left;
  padding-left: 2px;
  font-size: 5em;
  left: 0;
}

答案 11 :(得分：0)

你只需要为左右按钮调整你的css

＆＃13;
＆＃13; 
#wrapper {
  width: 800px;
  height: 400px;
  background-color: black;
}
#slide1 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#slide2 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#slide3 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#slide4 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#slide5 {
  width: 700px;
  height: 350px;
  background-color: green;
}
#right-button {
  color: white;
  float: right;
  padding-right: 2px;
  font-size: 5em;
  position: relative;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    top: 50%;
}
#left-button {
  color: white;
  float: left;
  padding-left: 2px;
  font-size: 5em;
  position: relative;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    top: 50%;
}
＆＃13; 
<h3>Presentation Slider</h3>
<div id="wrapper">
  <div id="left-button"><strong>&lt;</strong>
  </div>
  <!--
	<div id="slide1"></div>
	<div id="slide2"></div>
	<div id="slide3"></div>
	<div id="slide4"></div>
	<div id="slide5"></div>
	-->
  <div id="right-button"><strong>&gt;</strong>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 12 :(得分：0)

有两种方法可以做到这一点。

  1. 柔性
  2. 绝对位置

    3. 这个是使用flex

    ＆＃13;
    ＆＃13; 
    div{
background:#ccc;
color:#fff;
width:100%;
height:200px;
display:flex;
align-items:center;
justify-content:center;
}
    ＆＃13; 
    <div>

this is center
  
</div>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    这个人正在使用职位

    ＆＃13;
    ＆＃13; 
    .parent{
background:#000;
width:100%;
height:400px;
position:relative}

.child{
background:#ccc;
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
display:flex;
align-items:center;
justify-content:center;}
    ＆＃13; 
    <div class="parent">

<div class="child"> this is center </div>
  
</div>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    哪一个适合你？ ：）

答案 13 :(得分：0)

试试这个，

CSS：

#wrapper {
  width: 800px;
  height: 400px;
  background-color: black;
}
#right-button {
  color: white;
  font-size: 5em;
}
#left-button {
  color: white;
  font-size: 5em;
}
.main-container {
  display: flex;
  width: 500px;
  height: 400px;
  background: gray;
  vertical-align: middle;
  text-align: center;
  position: absolute;
}
.div-left {
  display: flex;
  width: 200px;
  height: 400px;
  float: left;
  position: relative;
  align-items: center;
  width: 10%;
  justify-content: center;
}
.div-middle{
  display: flex;
  text-align:center;
  width: 90%;
  height:400px;
  position: relative;
  align-items: center;
  justify-content: center;
}
.div-right{
  width: 10%;
  display: flex;
  height: 400px;
  float: right;
  position: relative;
  align-items: center;
  justify-content: center;
}

HTML：

<h3>Presentation Slider</h3>
<div id="wrapper" class="main-container">
    <div id="left-button" class="div-left"><strong>&lt;</strong></div>
    <div class="div-middle">This is the div with slides</div>
    <!--
    <div id="slide1"></div>
    <div id="slide2"></div>
    <div id="slide3"></div>
    <div id="slide4"></div>
    <div id="slide5"></div>
    -->
    <div id="right-button" class="div-right"><strong>&gt;</strong></div>
</div>
相关问题
最新问题