1. 首頁
  2. 問答
  3. 如何垂直居中HTML元素

如何垂直居中HTML元素

2016-12-21 136 views
0

我想垂直居中兩個箭頭。一個在左邊，另一個在右邊。最終目標是嘗試製作HTML和JavaScript內容的滑塊作爲學習工具。我似乎無法讓箭頭垂直居中。以下是我正在使用的代碼。我試過垂直對齊和頂部：50％，但似乎沒有工作。謝謝。如何垂直居中HTML元素

#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; 
 
}
<h3>Presentation Slider</h3> 
 
<div id="wrapper"> 
 
    <div id="left-button"><strong>&lt;</strong> 
 
    </div> 
 
    <!-- 
 
\t <div id="slide1"></div> 
 
\t <div id="slide2"></div> 
 
\t <div id="slide3"></div> 
 
\t <div id="slide4"></div> 
 
\t <div id="slide5"></div> 
 
\t --> 
 
    <div id="right-button"><strong>&gt;</strong> 
 
    </div> 
 
</div>

來源

2016-12-21 martinbshp

+0

你知道'class'es？而不是添加相同的CSS到每個ID，你可以使用'class'。或者，您可以合併具有相同CSS的所有選擇器。 – putvande

回答

0

喲可以使它像這樣：

#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%); 
 
}
<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>

來源

2016-12-21 10:04:37

+0

謝謝Bojan！我需要更多地研究位置。 – martinbshp

0

在這裏你去 - Flexbox的是現在

#wrapper { 
 
    background-color: #eee; 
 
    display:flex; 
 
    height: 200px; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
}
<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>

來源

2016-12-21 10:02:55

+0

這可能會弄亂他的幻燈片的位置。 – Roberrrt

0

嘗試這種最簡單的方法：

#wrapper{ 
    position:relative; 
} 

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

#left-button{ 
    left : 0; 
} 

#left-button{ 
    right : 0; 
}

來源

2016-12-21 10:02:59 Taniya

0 

#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%) 
 
}
<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>

我已經使用相對和絕對定位方法來中心垂直兩個箭頭。

來源

2016-12-21 10:05:02

0

您的樣式表未正確連接。將其移動到標籤<head> enter image description here

來源

2016-12-21 10:06:23 Alex

+0

元和標題也是如此。但這不是答案。它應該是一個評論。 – connexo

+0

正是！還有。 – Alex

0

試試這個。

播放與 translate 
#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; 
}

來源

2016-12-21 10:07:23 Hezron

0

，這一招的很酷的事情是你不關心#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%); 
}

來源

2016-12-21 10:08:53 Troyer

0

可以實現，使用彈性盒概念

以下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>

來源

2016-12-21 10:09:25

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

來源

2016-12-21 10:11:45 Aru

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; 
}

來源

2016-12-21 10:16:39 Momin

0

正義立場的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; 
 
}
<h3>Presentation Slider</h3> 
 
<div id="wrapper"> 
 
    <div id="left-button" class="arrow"> 
 
    <strong>&lt;</strong> 
 
    </div> 
 
    <!-- 
 
\t <div id="slide1"></div> 
 
\t <div id="slide2"></div> 
 
\t <div id="slide3"></div> 
 
\t <div id="slide4"></div> 
 
\t <div id="slide5"></div> 
 
\t --> 
 
    <div id="right-button" class="arrow"> 
 
    <strong>&gt;</strong> 
 
    </div> 
 
</div>

來源

2016-12-21 10:16:53 aavrug

0

你只需要調整你的CSS有點左，右按鍵

#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%; 
 
}
<h3>Presentation Slider</h3> 
 
<div id="wrapper"> 
 
    <div id="left-button"><strong>&lt;</strong> 
 
    </div> 
 
    <!-- 
 
\t <div id="slide1"></div> 
 
\t <div id="slide2"></div> 
 
\t <div id="slide3"></div> 
 
\t <div id="slide4"></div> 
 
\t <div id="slide5"></div> 
 
\t --> 
 
    <div id="right-button"><strong>&gt;</strong> 
 
    </div> 
 
</div>

來源

2016-12-21 10:32:28

0

2的方式來做到這一點。

  1. 撓曲
  2. 位置絕對

這一種是採用柔性

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

 
this is center 
 
    
 
</div>

而這一次是使用位置

.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;}
<div class="parent"> 
 

 
<div class="child"> this is center </div> 
 
    
 
</div>

哪一種適合你？:)

來源

2016-12-21 11:05:29 Obink

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>

來源

2016-12-21 11:21:20

相關問題

 相關問題