我的HTML代码有问题,我想将某部分内部的内容居中。 我不确定如何。 这是我的代码:HTML代码(实际上是一个PHP文件):

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="mateo.css">
    <title>Mateo's About Page</title>
</head>
<body>
    <div class="items">
        <div id="basicInfo">
            <img src="images/question.png">
        </div>
        <div id="langs">
            <img src="images/code.jpg">
        </div>
    </div>
    <div id="textSpace">

    </div>
    <?php
    $username = $_POST['username'];
    $password = $_POST['password'];


    $accounts = mysqli_connect("localhost","root","BKpH7e6k","accounts") or die(mysqli_error());
    mysqli_select_db($accounts, "accounts");


    $sql = "
    SELECT * from users WHERE Username LIKE '{$username}' AND Password LIKE '{$password}' LIMIT 1
    ";

    $results = $accounts->query($sql);
    if(!$results->num_rows == 1){
        header("Location: http://localhost/aboutPage/login.php");
    } else {
        echo "<p>Logged in successfully!</p>";
    }

  ?>
</body>
</html>

这是我的css文件:

body {
    background: url("images/background.jpg") repeat;
    font-size: 100%;
    font-family: Arial;
}

.items {
    display: block;
    background-color: gray;
    max-width: 50%;
    max-height: 100%;
    border-radius: 20px;
    border: 2px solid black;
    opacity: .8;
    margin-left: auto;
    margin-right: auto;

}
#basicInfo{
    background-color: orange;
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
}
#basicInfo:hover{
    background-color: green;
}
#basicInfo img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 16px;
}
#langs{
    background-color: orange;
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
}
#langs img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 16px;
}
#langs:hover{
    background-color: green;
}

这是一个图片或问题。 问题

因此,我希望橙色框在它们所在的div的中心中彼此相邻漂浮。可以提供任何帮助:) Thanks1

#1楼 票数:0 已采纳

由于您在#basicInfo#langs上使用display: inline-block#langs仅在父.items上调用text-align: center

.items {
   display: block;
   background-color: gray;
   max-width: 50%;
   max-height: 100%;
   border-radius: 20px;
   border: 2px solid black;
   opacity: .8;
   margin-left: auto;
   margin-right: auto;
   text-align: center; //add
}

小提琴

#2楼 票数:0

在您的.items类中添加text-align:center( http://jsfiddle.net/cz19q7a9/

.items
{
   text-align: center;
}

#3楼 票数:0

只需做一下margin: autodiv内部margin: auto设置,它将根据其父级居中。 这是一个例子

  ask by Grim Reaper translate from so

未解决问题?本站智能推荐:

6回复

DIV在居中的div旁边

// 我想在居中的div旁边有一个div(见上图),但我得到的是这个。 http://i.imgur.com/X0e4s.png 我该如何解决这个问题? 问候
2回复

在居中的响应式div中彼此堆叠图像

我有以下代码。 进行设置以使图像响应(随窗口大小缩放)并在水平和垂直方向上居中放置。 一切正常,直到我想添加多张堆叠在一起的图像以进行幻灯片显示(淡入,淡出)。 我必须将img标签定位为“绝对”。 而且它显然使父div崩溃了。 基本上,我希望有一种替代方法可以在不使用绝对定位的情况下将
10回复

DIV中的居中文本[重复]

这个问题在这里已经有了答案: 如何在 div 块内居中文本(水平和垂直)? (27 个回答) 1 年前关闭。 我一直被这个烦人的问题所困
1回复

居中位置:父位置内的绝对div:相对div

回复: http : //jsfiddle.net/WdGdd/3/ 是否可以将position:absolute div置于其父position:relative div的中心? 这个想法是制作一个按钮,其文本是两个值之一。 它的宽度保持较长的那个值的长度。 当显示两个值中的较小者
5回复

在div中将居中垂直居中

我有一个包含span的div,我希望该span垂直和水平对齐到div的中心。 这是小提琴: http : //jsfiddle.net/RhNc2/1/ 我试过margin:auto在span和vertical-align在div ,但是不起作用 编辑:我的div和我的跨度没有固定的
3回复

我想让一个div居中,而另一个div居中。

这是我的CSS和html: .container { background-image: url('./images/bg.jpg'); height: 500px; width: 960px; margin: auto; } .logo { margin: auto; text-ali
1回复

为什么我的Div偏向右侧而不是居中?

我不太清楚为什么,但是我无法确定我的div为什么向右偏移。 我仍然对定位有些困惑,所以我可能在那儿犯了一个错误。 这是我在容器div上的代码: 如果您看一下下面发布的小提琴,您会发现左侧比右侧的空间更大。 如果看不到,请尝试扩展预览窗口。 非常感谢任何帮助,谢谢! http:/
2回复

居中导航栏div

我在高中时学习了一些html和CSS,但是在为小型企业创建网站时遇到了一些麻烦。 我已经创建了导航栏设计,但是无法在包装中居中。 我当前的代码如下。 body { background-color: #3393FF; font-family: 'Palatino Linotype',