使用Bootstrap将主图像居中

时间：2015-12-13 05:35:00

标签： html css twitter-bootstrap center srcset

在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，但网站上的其他图片都没问题。

我已打开边框，您可以看到主图像是如何偏离左侧的。

2 个答案:

答案 0 :(得分：1)

您可以像以下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">

答案 1 :(得分：1)

将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>
相关问题
最新问题