时间戳

首页 > 解决方案 > 如何将内容与 css 对齐

html - 如何将内容与 css 对齐

问题描述

我无法使用 css 将一些图像与中心对齐。这是我页面的整体内容：

<body>
  <header>...</header>
  <div id="topBar">...</div>
  <div class="freeSpace">...</div>
</body>

在“freeSpace”中，我只有一个包含以下内容的无序列表（用 php 编写）：

 echo('<li><div class="container">');
 echo('<div class="text-block">');
 echo("<p>Name: $name</p>");
 echo("<p>Cost: $nightCost € per night</p>");
 echo("<p>Address: $address</p>");
 echo("<p>Brief Description: $brief</p>");
 echo('</div>');
 echo("<a href=\"https://www.facebook.com/blah\">");
 echo "<img class=\"houseImg\" src='data:$imgID;base64, $imgData' />";
 echo("</a>");
 echo('</div> </li>');

这是我页面的当前外观（忽略占位符“booking.com”图标）

当前页面外观

我希望每个容器都居中，并且我在各个地方都使用了“文本对齐：居中”，但它只是不起作用。

这是应用于所有内容的当前 CSS，但不是标题和“topBar”：


.freeSpace
{
    text-align: center;
}


.container {
    text-align: center;
    padding-left: 7em;
    padding-bottom: 4em;
    position: relative;
    width: 58em;
}

 .container>*>img:hover
{
    width: calc(100% + 3em);
}

.container>a , .container>*>img {
    transition: width 1s;
    width:inherit;
}

.text-block {
    text-align: center;
    transition: width 1s, top 1s;
    position: absolute; 
    width: 89.4%;
    height: 22.1%;
    margin: 4em;
    top: 25.2em;
    left: 3em;
    bottom: 0;
    right: 0;
    z-index: 51;
}

ul {
    text-align: center;
}

标签： htmlcss

解决方案

你的 CSS 有一些疯狂的东西，尤其是text-block类。忽略这一点，您的主要问题是container班级的宽度。

width: 58em;从中删除.container

.freeSpace
{
    text-align: center;
}


.container {
    text-align: center;
    padding-left: 7em;
    padding-bottom: 4em;
    position: relative;
}

 .container>*>img:hover
{
    width: calc(100% + 3em);
}

.container>a , .container>*>img {
    transition: width 1s;
    width:inherit;
}

.text-block {
    text-align: center;
    transition: width 1s, top 1s;
    position: absolute; 
    width: 89.4%;
    height: 22.1%;
    margin: 4em;
    top: 25.2em;
    left: 3em;
    bottom: 0;
    right: 0;
    z-index: 51;
}

ul {
    text-align: center;
}
<header>...</header>
<div id="topBar">...</div>
<div class="freeSpace">
  <li>
    <div class="container">
      <div class="text-block">
        <p>Name: $name</p>
        <p>Cost: $nightCost € per night</p>
        <p>Address: $address</p>
        <p>Brief Description: $brief</p>
      </div>
      <a href="https://www.facebook.com/blah">
        <img class="houseImg" src="data:$imgID;base64, $imgData" />
      </a>
    </div>
  </li>
</div>

推荐阅读