Div sur une image et bootstrap

Bonjour all !

Je cherchai un bout de code pour placer ma div en opacity au milieu d'une image donc voici le code qui fonctionne sans bootstrap :

.interieur {
	background-color:#000;
  	-moz-opacity: 0.7;
	-webkit-opacity: 0.7;
	-o-opacity: 0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
	 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  	filter:alpha(opacity=70); /* For IE8 and earlier */
	width:120px;
	height:120px;
	margin:auto; 
	padding:auto; 
	font-family:aller; 
	font-size:20px; 
	color:#fff; 
	text-align:center;	
}

.exterieur {
	width:200px; 
	height:200px;
	display: table-cell;
	vertical-align: middle; 
	background: transparent url(images/shoes1.jpg) no-repeat;	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

Puis le code html :

<div class="container">
    <div class="row">
    	<div class="col-lg-12">
       	 	<div class="col-lg-3 exterieur"> 
                <div class="col-lg-9 interieur"> 
                  Exemple de texte centré <br /> sur plusieurs lignes 
               </div> 
            </div>
        	<div class="exterieur"> 
               <div class="interieur"> 
                  Exemple de texte centré <br /> sur plusieurs lignes 
               </div> 
            </div>
    	</div>
	</div> 
</div>

En gros, quand j'enlève le "col-lg-* " , ma div est bien centrée..

Alors pourquoi quand je veux utiliser bootstrap, ça déconne?

Merci pour vos réponses
Modifié par oceane751 (10 May 2015 - 16:57)

Hello,

Ajoute un float:none sur .exterieur ça devrait fonctionner.

Hey!

J'ai fait ça :

.exterieur {
    display: table-cell;
    vertical-align: middle;
    background: transparent url(images/shoes1.jpg) no-repeat;  
    background-size:100%;
    height: 140px;
    display:block;
    padding:0 !important;
	margin:0;
}

.exterieur2 {
    display: table-cell;
    vertical-align: middle;
    background: transparent url(images/shoes2.jpg) no-repeat;  
    background-size:100%;
    height: 140px;
    display:block;
    padding:0 !important;
    margin:0;
}

.exterieur3 {
    display: table-cell;
    vertical-align: middle;
    background: transparent url(images/shoes3.jpg) no-repeat;  
    background-size:100%;
    height: 140px;
    display:block;
    padding:0 !important;
    margin:0;
}
 
.interieur {
    background-color:#000;
    -moz-opacity: 0.7;
    -webkit-opacity: 0.7;
    -o-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter:alpha(opacity=70);
    font-family:aller;
    font-size:20px;
    color:#fff;
    text-align:center; 
}	

@media (min-width : 1200px){

	.exterieur {
		height:200px;
		margin-right:70px;
		margin-top:50px;
	}
	
	.exterieur2 {
		height:200px;
		margin-right:70px;
		margin-top:50px;
	}
	
	.exterieur3 {
		height:200px;
		margin-right:70px;
		margin-top:50px;
	}
	
	.interieur {
		min-height:58px;
		height:auto;
		overflow:hidden;
		margin:56px auto auto 35px;
		padding-top:15px;
 
	}	

}


@media (min-width: 786px) and (max-width: 992px) {

    .exterieur {
		height:100px;
		margin-right:55px;
		margin-top:50px;
	}
	
	 .exterieur2 {
		height:100px;
		margin-right:55px;
		margin-top:50px;
	}
	
	 .exterieur3 {
		height:100px;
		margin-right:10px;
		margin-top:50px;
	}
	
	.interieur {
		min-height:45px;
		height:auto;
		overflow:hidden;
		margin:35px auto auto 25px;
		padding-top:10px;
 
	}	

}

Avec ça :

<div class="container">
    <div class="row">
    	<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-11 col-md-11 col-sm-11">
       	 	<div class="col-lg-3 col-md-3 col-sm-3 exterieur"> 
               <div class="col-lg-9 col-md-9 col-sm-9 interieur"> 
                 ON SALE! 
               </div> 
            </div>
        	<div class="col-lg-3 col-md-3 col-sm-3 exterieur2"> 
               <div class="col-lg-9 col-md-9 col-sm-9 interieur"> 
                  ON SALE! 
               </div> 
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 exterieur3"> 
               <div class="col-lg-9 col-md-9 col-sm-9 interieur"> 
                  ON SALE!  
               </div> 
            </div>
    	</div>
	</div> 
</div>

Et ça à l'air de fonctionner en col-sm, là où j'avais des problèmes..

ps : j'ai pas fait le col-md ni le col-xs

Qu'en penSez vous?
Modifié par oceane751 (12 May 2015 - 08:14)

Yordi a écrit :
Hello,

Ajoute un float:none sur .exterieur ça devrait fonctionner.

Je crois que j'avais testé le float:none; mais sans grand succès en testant bien