Plazieren Karussell in der Mitte der Seite

Ich möchte mein Karussell in der Mitte der Seite mit einem weißen Rand an ihm befestigt. Aber ich kann es nicht tun. Ich habe Polsterung benutzt, aber die Grenze passt sich nicht mit dem Karussell an. Wenn ich die Polsterung etwas reduziere, dann verschieben sich die Karussellpfeile nicht mit Karussell. Hier ist meine HTML-Datei Code:Plazieren Karussell in der Mitte der Seite

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Carousel Test</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/style.css"> 
    <script src="js/prefixfree.min.js"></script> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 

<body> 

<header> 

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#featured"><h1>Carousel <span class="subhead">Practice</span></h1></a> 
     </div><!-- navbar-header --> 
     <div class="collapse navbar-collapse" id="collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#featured">Home</a></li> 
      <li><a href="#mission">Mission</a></li> 
      <li><a href="#services">Services</a></li> 
      <li><a href="#staff">Staff</a></li> 
      <li><a href="#testimonials">Testimonials</a></li> 
     </ul>   
     </div><!-- collapse navbar-collapse --> 
    </div><!-- container --> 
    </nav> 

<div class="container wrapping"> 
    <div class="carousel slide" data-ride="carousel" id="featured"> 

    <div class="carousel-inner"> 
     <div class="item active"><img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo"></div> 
     <div class="item"><img src="images/carousel-mission.jpg" alt="Mission"></div> 
     <div class="item"><img src="images/carousel-vaccinations.jpg" alt="Vaccinations"></div> 
     <div class="item"><img src="images/carousel-fish.jpg" alt="Fish"></div> 
     <div class="item"><img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals"></div>  
    </div><!-- carousel-inner --> 

    <a class="left carousel-control" href="#featured" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#featured" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
    </div> 
    </div><!-- featured carousel --> 
</header> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<script src="js/myscript.js"></script> 
</body> 
</html>

Das ist mein CSS ist:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800|Roboto+Slab:400,100,300,700); 

/** Basic Page CSS **/ 
body{ 
    font-family: "Roboto Slab", sans-serif; 
    font-weight: 300; 
    font-size: 2em; 
    position: relative; 
} 

h1, h2, h3, h4, h5, h6 { 
    font-family: "Open Sans", sans-serif; 
    font-weight: 100; 
    margin: 0; 
} 

header{ 
    background-color: #00173f; 
} 

.carousel-inner{ 
padding: 150px 30px 100px 30px; 
border: 15px solid #fff; border-radius: 5px; 
} 


/** Header Navigation **/ 

header .navbar { 
    padding: 30px 0; 
    transition: all .5s ease-out; 
} 

header .navbar-default { 
    background-color: transparent; 
    border: none; 
} 

header .navbar-default .navbar-nav a { 
    color: white; 
    padding: 5px 8px; 
} 

header .navbar-default .navbar-nav a:hover { 
    color: #EEC856; 
} 

header .navbar-default .navbar-nav .active a { 
    font-weight: 700; 
    color: #EEC856; 
    background: transparent; 
    border-bottom: 4px solid #EEC856; 
    text-shadow: none; 
} 

header .navbar-default .navbar-nav .active a:hover { 
    color: #E15D5F; 
    background: transparent; 
    text-shadow: none; 
} 

/** Navbar Brand **/ 

header .navbar-brand { 
    background: url(../images/wisdompetlogo.svg); 
    background-repeat: no-repeat; 
    background-position: 15px 0; 
    height: auto; 
} 

header .navbar-brand h1 { 
    color: white; 
    margin: 0; 
    font-size: 1.8em; 
    font-weight: 400; 
    padding-left: 105px; 
} 

header .navbar-brand span.subhead { 
    display: block; 
    font-family: "Roboto Slab", serif; 
    font-size: .6em; 
    font-weight: 100; 
} 

/** Navbar Toggle **/ 
header .navbar-toggle { 
    background-color: #279182; 
} 

header .navbar-default .navbar-toggle .icon-bar { 
    background-color: white; 
} 

@media only screen 
and (max-width: 768px) { 
    header .navbar-collapse.in { 
    background-color: rgba(0,0,0, .5); 
    } 
}

Dieses ist eine meiner Bilder ist verlinken: https://www.google.co.in/search?q=wisdom+pet+medicine&espv=2&biw=1280&bih=614&source=lnms&tbm=isch&sa=X&sqi=2&ved=0ahUKEwiejtTiqs7PAhWBPo8KHXsbDlwQ_AUIBigB&dpr=1.5#imgrc=uU4osiOZHZGu9M%3A

Quelle

2016-10-09 Aakrisha Agarwal

Ich bin nicht ganz sicher, ob Ihr Problem ist die Grenze, die Positionierung oder beides.

Sie haben Ihr Karussell in Ihre Kopfzeile eingewickelt. Dies könnte verhindern, dass es in der Mitte Ihrer Seite positioniert wird. Wenn Sie möchten, dass es in einer eigenen Sektion ist, würde ich es in eine Container-Fluid-Div-Klasse setzen und das Styling wie gewünscht hinzufügen.

Quelle

2016-10-09 22:24:35

Ja beide. Ich habe es versucht, aber es wird nicht behoben. –

Plazieren Karussell in der Mitte der Seite

Antwort

Verwandte Themen