Q

Как центрировать элементы HTML по вертикали

html
css

2016-12-21 3 views 0 likes

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 к каждому идентификатору, вы можете использовать 'class'. В качестве альтернативы вы можете комбинировать все селектора, которые имеют один и тот же CSS. – putvande

A

ответ

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

Спасибо, Боян! Мне нужно еще кое-что изучить. – 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>

источник

2016-12-21 10:06:23 Alex

+0

То же самое верно для мета и названия. Но это не ответ. Это должен быть комментарий. – connexo

+0

Точно! И есть. – Alex

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

источник

2016-12-21 10:07:23 Hezron

0

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

источник

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>

источник

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 способа сделать это.

прогибается
положение абсолютное

это один использует гибкий

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

Смежные вопросы