html - 使用 Bootstrap 居中主图像

Question

在 SO 上 Bootstrap 有几个居中问题，但我没有找到我的确切问题。

我的网站可以在http://project.livestagingserver.com/test.html查看

这是代码：

* {
    border: 1px solid red !important;
}

/********************************************
  h1
  h2
  h3
  .center
  p
  #footy
  #copy

*********************************************/
h1{
    font-family: Roboto, sans-serif;
    font-weight: 100;
}

h2{
    font-family: Roboto, sans-serif;
    font-weight: 400;
    text-align: center;
}
h3{
    font-family: Roboto, sans-serif;
    font-weight: 100;
}

.center{
    width: 100%;
    margin: 0 auto;
}

.row{
    text-align: center;
}

p{
    text-align: center;
}

#footy{
    height: 40px;
    /*border: 1px solid red !important;*/
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

/*Main Styles*/
.container {
    margin: 0 auto;
    width: 945px;
    padding: 0 0 30px 0;
}

#logo {
    padding: 10px;
}

#name {
    text-align: right;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    padding: 10px;
}

h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}

h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}

.featured {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    padding-left: 10px;
}

#titles {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 24px;
    text-align: center;
}

#urls {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
}

#urls a {
    text-decoration: none;
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}

#mainImage{
    margin: 0;
    padding: 0;
}

#footy {
    margin: 0 auto;
    width: 945px;
}

#copy{
    margin-left: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet'>

    <title>Framework Test Page</title>
</head>
<body>

<div class="container">

    <div class="row">

        <div id="header" class="col-xs-12">
            <div id="logo" class="col-xs-12 col-md-6"><img src="img/denvercoderlogo.png" alt="Denver Coder Logo with Denver Skyline and Mountains"/>
            </div>
            <div id="name" class="col-xs-12 col-md-6"><h1>Timothy Myers</h1>

                <h3>Denver COder</h3></div>
        </div> <!-- Header -->


    </div>

    <hr>

    <div class="row">


        <picture class="col-xs-12 center">
            <source media="(min-width: 768px)" srcset="img/mainImageSet/mainImage.jpg">
            <img src="img/mainImageSet/mainImageMedium.jpg" alt="Desk with laptop and some supplies"/>
        </picture>


    </div>

    <div class="row">
        <div id="features">
            <div class="col-xs-12">
                <h2 class="featured">Featured Work</h2>
            </div>
        </div>
    </div>

    <hr>

    <div class="row">

        <div class="col-md-4">
            <h2>Luke For Prez</h2>
            <img class="center" src="img/darthImageSet/darthnevets.png" alt="Stylized Luke Skywalker"/>

            <p><a href="http://rottenonions.freeforums.org/who-needs-a-200x200-av-t106-50.html">Luke For Prez</a>
            </p>
        </div>

        <div class="col-md-4">
            <h2>Penguins R Us</h2>
            <img class="center" src="img/penguinImageSet/penguin.png" alt="Cartoon Penguin"/>

            <p><a href="http://www.zonadiyer.com.ar/post72281.html">Penguins</a></p>
        </div>

        <div class="col-md-4">
            <h2>BioHazard</h2>
            <img class="center" src="img/bioImageSet/bio.gif" alt="Biohazard Symbol"/>

            <p><a href="http://www.instructables.com/file/FEJMEETFGHSZ9J9/">BioHazard</a></p>
        </div>

    </div> <!-- Row -->


    <footer id="footy">
        <div class="row">
            <div class="col-xs-12">
                <div id="legal">
                    <hr>
                    <p id="copy">&copy;2015 Denver Coder</p>
                    <hr>
                </div>
            </div>
        </div>
    </footer>

</div> <!-- Container -->

<script src="js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>
    <title>Framework Test Page</title>
</head>
<body>
<div class="container">
    <div id="header" class="row">
        <div id="logo" class="col-6"><img src="img/denvercoderlogo.png" alt="Denver Coder Logo with Denver Skyline and Mountains"/></div>
        <div id="name" class="col-6"><h1>Timothy Myers</h1><h3>Denver COder</h3></div>
    </div>
    <hr>
    <div id="mainImage" class="row">
        <img src="img/mainImage.jpg" alt="Desk with laptop and some supplies"/>
    </div>
    <div id="features" class="row">
        <div class="col-4">
            <h2 class="featured">Featured Work</h2>
        </div>
    </div>
    <div id="project-images" class="row">
        <div class="col-4"><img class="center" src="img/darthnevets.png" alt="Stylized Luke Skywalker"/></div>
        <div class="col-4"><img class="center" src="img/penguin.png" alt="Cartoon Penguin"/></div>
        <div class="col-4"><img class="center" src="img/bio.gif" alt="Biohazard Symbol"/></div>
    </div>
    <div id="titles" class="row">
        <div class="col-4">Luke For President</div>
        <div class="col-4">Penguins R Us</div>
        <div class="col-4">BioHazard</div>
    </div>
    <div id="urls" class="row">
        <div class="col-4"><a href="http://rottenonions.freeforums.org/who-needs-a-200x200-av-t106-50.html">Luke For
            Prez</a></div>
        <div class="col-4"><a href="http://www.zonadiyer.com.ar/post72281.html">Penguins</a></div>
        <div class="col-4"><a href="http://www.instructables.com/file/FEJMEETFGHSZ9J9/">BioHazard</a></div>
    </div>
</div>
<footer id="footy">
    <div class="row">
        <div class="col-12">
            <div id="legal">
                <hr>
                <p id="copy">&copy;2015 Denver Coder</p>
                <hr>
            </div>
        </div>
    </div>
</footer>


</body>
</html>

我的问题是无论我尝试什么，mainImage 都没有居中。我不知道我是否正确实施了 srcset，但网站上的其他图像都很好。

我已经打开了边框，你可以看到主图像在左边是如何关闭的。

score 1 · Accepted Answer

您可以像下面的 CSS 代码一样使用它来使图像和内容居中.row

.row {
    margin-right: -15px;
    margin-left: -15px;
    text-align: center;
}

你也可以试试class="img-responsive center-block"。只需为所有图像添加它，如下所示：

<img src="img/mainImageSet/mainImageMedium.jpg" alt="Desk with laptop and some supplies" class="img-responsive center-block">

score 1 · Accepted Answer

像这样添加class 'center'到div上面picture：

<div class="row center">
    <picture class="center">
        <source srcset="img/mainImageSet/mainImageLarge.jpg" media="(min-width: 768px)"></source>
        <img alt="Desk with laptop and some supplies" src="img/mainImageSet/mainImageMedium.jpg">
    </picture>
</div>

html - 使用 Bootstrap 居中主图像

2 回答 2

Related

Reference