首页 文章

html / css：div中的中心按钮

提问于
浏览 次
0

我已经使用以下代码定义了一个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 

		This is an example text 

		This is an example text 

		This is an example text 

		

		

		</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;">&rarr;</button>
					<div>blah, blah, blah, blah</div>
					<button>&larr;</button>
				</div>
				<div style="border: 1px solid black;">
					<button style="margin: 0 auto;">&rarr;</button>
					<div>blah, blah, blah, blah</div>
					<button>&larr;</button>
				</div>
			</div>
			<div class="dividerv"></div>
			<div class="main-rows">
				<div style="border: 1px solid black;">
					<button style="margin: 0 auto;">&rarr;</button>
					<div>blah, blah, blah, blah</div>
					<button>&larr;</button>
				</div>
			</div>

			<div class="dividerv"></div>
		</div>
	</div>
</body>
</html>

主要问题是：如何用箭头水平对中按钮？我已经测试了几个基于“text-align”和类似但没有成功的解决方案（请在将其标记为重复之前考虑到这一点） .

此外，欢迎如何简化此代码 . 特别是，如何跳过重复块的需要：

<div style="border: 1px solid black;">
                <button style="margin: 0 auto;">&rarr;</button>
                <div>blah, blah, blah, blah</div>
                <button>&larr;</button>
            </div>

只有在与每个按钮相关的动作（“onclick”功能）和按钮之间出现的文本中，它才会从一个变为另一个 . 可能是一个JavaScript解决方案可以允许这部分 .

非常感谢 .

javascript html css flexbox

2 回答

  • 0

    只需将此添加到您的CSS：

    button{
  display: block;
  margin: 0 auto;
}

    你需要一直重复它，HTML没有变量之类的东西 .

    您可以使用HTML代码创建一个PHP文件，然后通过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 
    
		This is an example text 
    
		This is an example text 
    
		This is an example text 
    
		
    
		
    
		</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;">&rarr;</button>
					<div>blah, blah, blah, blah</div>
					<button>&larr;</button>
				</div>
				<div style="border: 1px solid black;">
					<button style="margin: 0 auto;">&rarr;</button>
					<div>blah, blah, blah, blah</div>
					<button>&larr;</button>
				</div>
			</div>
			<div class="dividerv"></div>
			<div class="main-rows">
				<div style="border: 1px solid black;">
					<button style="margin: 0 auto;">&rarr;</button>
					<div>blah, blah, blah, blah</div>
					<button>&larr;</button>
				</div>
			</div>

			<div class="dividerv"></div>
		</div>
	</div>
</body>
</html>
    回复于
  • 2

    像这样更新你的CSS .

    button {
  display: inline-block;
  margin: 0 auto;
}
    回复于

相关问题