Question

我遇到问题，将我的按钮放在屏幕中央并排放置。我只能成功地获得另一个但不是两个。目前使用以下代码，按钮是并排的，但保留在屏幕的左上角。以下是我目前设置的代码。注释掉的行只是我尝试过的一些内容。任何帮助表示赞赏。

  body {
    background-image: url("KDHub_Wallpaper.jpg");
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
    background-color: #00ADEF;
}

	.button {
	appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    text-decoration: none; 
    display: inline-block; 
    padding: 2px 8px;
	  #margin: auto;
	  #margin-top: 225px;
    #display: block;
    width: 300px;
    height: 60px;
    line-height: 60px;
    background-color: #941c2f;
    color: white;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
	  #border:0;
	  #border-radius: 25px;
    padding: 5px 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	  #position: static;
	  top: 50%;
	  left: 50%;
}

	.button:hover{
	background: #C1CFDA;
	color: black
}

<html>
<head>
	<link rel="stylesheet" href="styles.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>KDHub</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
	<div class="container">
		<a href="https://test.url.com" class="button" target="_blank">Test 2</a>
		<a href="https:/test.url2.com" class="button" target="_blank">Test 2</a>
	</div>

</body>
</html>

Answer 1

使用CSS randColumn。您可以在此处了解详情：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在你的css中添加了以下代码：

void makeMaze(char[][]level, int startX, int startY, int endX, int endY) {
    //1. If the current maze block is too small, return.
    if (tooSmallToMakeMaze(startX, startY, endX, endY)) return;

    //2. If the current maze block is right size, build the maze in this block and return.
    if (blockSizeIsAcceptable(startX, startY, endX, endY)) {
        buildMazeBlock(...);
        return;
    }

    //3. If I reached here, block is too big and needs to be broken down.
    int randomX = getRandomValueBetween(startY, endY);
    int randomY = getRandomValueBetween(startX, endX);

    //Now, you have four quads defined by bottom left point and top right point as.
    //[(startX, startY), (randomX, randomY)]
    //[(startX, randomY), (randomX, endY)]
    //[(randomX, randomY), (endX, endY)]
    //[randomX, startY), (endX, randomY)]
    // I've assumed (startX, startY) is left bottom and (endX, endY) is top right

    //So, just call this very method for the four quads. It will return automatically
    //when the quad is too small to make maze and go on to make mazes in the other
    //three quads. Somewhat like this:
    makeMaze(levels, startX, startY, randomX, randomY);
    makeMaze(levels, startX, randomY, randomX, endY);
    makeMaze(levels, randomX, randomY, endX, endY);
    makeMaze(levels, randomX, startY, endX, randomY);

    //The above four calls would have gone down recursively themselves, making sure that
    //the four quads are built. So you can peacefully return now knowing that levels is
    //now properly built as a maze.
}

＆＃13;

flex

＆＃13;

.container {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

＆＃13;

Answer 2

您的代码很好，您只需在按钮的父元素中添加文本对齐中心以使内联块居中

＆＃13;

  body {
    background-image: url("KDHub_Wallpaper.jpg");
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
    background-color: #00ADEF;
}

/* Added */
.container{
text-align:center
}

	.button {
	appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    text-decoration: none; 
    display: inline-block; 
    padding: 2px 8px;
	  #margin: auto;
	  #margin-top: 225px;
    #display: block;
    width: 200px;
    height: 60px;
    line-height: 60px;
    background-color: #941c2f;
    color: white;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
	  #border:0;
	  #border-radius: 25px;
    padding: 5px 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	  #position: static;
	  top: 50%;
	  left: 50%;
}

	.button:hover{
	background: #C1CFDA;
	color: black
}

＆＃13;

<html>
<head>
	<link rel="stylesheet" href="styles.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>KDHub</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
	<div class="container">
		<a href="https://test.url.com" class="button" target="_blank">Test 2</a>
		<a href="https:/test.url2.com" class="button" target="_blank">Test 2</a>
	</div>

</body>
</html>

＆＃13;

Answer 3

您将margin-top与position: static结合使用，这将无效。您似乎也尝试使用top: 50%和left: 50%来控制定位。 top和left应与absolute positioning一起使用，marign-top应与relative positioning一起使用。

使用display: flex，align-items: center和justify-content: center属性值，最简单的方法是使用flexbox实现水平和垂直居中。请注意，您还需要指定height属性才能使flex生效：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

在以下示例中可以看到这一点，我还修复了URL和一些无效属性（前面带有#）：

body {
  background-image: url("KDHub_Wallpaper.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-color: #00ADEF;
}

.button {
  appearance: button;
  -moz-appearance: button;
  -webkit-appearance: button;
  text-decoration: none;
  display: inline-block;
  padding: 2px 8px;
  margin: auto;
  display: block;
  width: 300px;
  height: 60px;
  line-height: 60px;
  background-color: #941c2f;
  color: white;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  border: 0;
  border-radius: 25px;
  padding: 5px 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: static;
}

.button:hover {
  background: #C1CFDA;
  color: black;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  border: 1px solid black;
}

<html>

<head>
  <link rel="stylesheet" href="styles.css">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>KDHub</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
  <div class="container">
    <a href="https://test.url.com" class="button" target="_blank">Test 2</a>
    <a href="https://test.url2.com" class="button" target="_blank">Test 2</a>
  </div>
</body>

</html>

希望这有帮助！：）

按钮居中并排并排

3 个答案: