Html / css: центральные кнопки в div
Я определил страницу html / css со следующим кодом:
<!DOCTYPE html>
<html><head>
<title>TEST1</title>
<meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main-rows {
display: flex;
flex-flow: column;
}
.main-columns {
display: flex;
flex-flow: row;
}
.dividerv {
background: black;
width: 4px;
}
.dividerh {
background: black;
height: 4px;
}
</style>
</head>
<body>
<div class = "main-rows">
<div>
This is an example text <br/>
This is an example text <br/>
This is an example text <br/>
This is an example text <br/>
<br/>
<br/>
</div>
<div class = "dividerh"></div>
<div class = "main-columns">
<div class = "dividerv"></div>
<div class = "main-rows">
<div style = "border: 1px solid black;">
<button style = "margin: 0 auto;">→</button>
<div>blah, blah, blah, blah</div>
<button>←</button>
</div>
<div style = "border: 1px solid black;">
<button style = "margin: 0 auto;">→</button>
<div>blah, blah, blah, blah</div>
<button>←</button>
</div>
</div>
<div class = "dividerv"></div>
<div class = "main-rows">
<div style = "border: 1px solid black;">
<button style = "margin: 0 auto;">→</button>
<div>blah, blah, blah, blah</div>
<button>←</button>
</div>
</div>
<div class = "dividerv"></div>
</div>
</div>
</body>
</html>Главный вопрос: как расположить кнопки со стрелками по горизонтали? Я протестировал несколько решений, основанных на «выравнивании текста» и подобных, но безуспешно (пожалуйста, примите это во внимание, прежде чем отмечать как дублированные).
Кроме того, будет приветствоваться, как упростить этот код. В частности, как пропустить необходимость повторения блоков как:
<div style = "border: 1px solid black;">
<button style = "margin: 0 auto;">→</button>
<div>blah, blah, blah, blah</div>
<button>←</button>
</div>
которые будут меняться с одного на другое только в действиях, связанных с каждой кнопкой (функции «onclick»), и в тексте, который появляется между кнопками. Может быть, решение javascript может разрешить эту часть.
Большое спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Просто добавьте это в свой css:
button{
display: block;
margin: 0 auto;
}
Это нужно постоянно повторять, в HTML нет чего-то вроде переменных.
Вы можете создать файл PHP с кодом HTML, а затем включить его через PHP (<?php include "filename.php" ?>). То же самое можно сделать с помощью javascript, но другим способом.
.main-rows {
display: flex;
flex-flow: column;
}
.main-columns {
display: flex;
flex-flow: row;
}
.dividerv {
background: black;
width: 4px;
}
.dividerh {
background: black;
height: 4px;
}
button{
display: block;
margin: 0 auto;
}<!DOCTYPE html>
<html><head>
<title>TEST1</title>
<meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
</head>
<body>
<div class = "main-rows">
<div>
This is an example text <br/>
This is an example text <br/>
This is an example text <br/>
This is an example text <br/>
<br/>
<br/>
</div>
<div class = "dividerh"></div>
<div class = "main-columns">
<div class = "dividerv"></div>
<div class = "main-rows">
<div style = "border: 1px solid black;">
<button style = "margin: 0 auto;">→</button>
<div>blah, blah, blah, blah</div>
<button>←</button>
</div>
<div style = "border: 1px solid black;">
<button style = "margin: 0 auto;">→</button>
<div>blah, blah, blah, blah</div>
<button>←</button>
</div>
</div>
<div class = "dividerv"></div>
<div class = "main-rows">
<div style = "border: 1px solid black;">
<button style = "margin: 0 auto;">→</button>
<div>blah, blah, blah, blah</div>
<button>←</button>
</div>
</div>
<div class = "dividerv"></div>
</div>
</div>
</body>
</html>Спасибо за Ваш ответ. Еще один момент: для объединения вертикального и горизонтального стека элементов я использую стили «main-columns» и «main-rows». Это хороший метод или есть более простой?
Имена классов не имеют значения, вы можете называть его hello-world, и он все равно будет хорош. Но если вы имели в виду стиль. Я не очень хорошо разбираюсь в flexbox, поэтому не могу вам с этим помочь.
Да, я имел в виду стиль или метод достижения этого результата. Иногда мне кажется, что у flexbox должен быть более простой способ.
обновите свой CSS следующим образом.
button {
display: inline-block;
margin: 0 auto;
}
Чтобы применить трюк с margin: 0 auto;, вам нужен display: block; ... Это не работает
Подтверждаю, что ожидаемого результата нет.
Возможный дубликат Что именно нужно для "margin: 0 auto;" работать?