Saudações,
Bem mais uma dúvida que me está a fazer um pouco confusão desde que estou a ver "Bootstrap" pela frente...
![Imagem Colocada]()
Basicamente, tenho de fazer isto. o meu problema, é por as coisas alinhadas, e claro, responsive.
Como posso fazer isto? já tentei o vertical-align:middle; e claro, jogar um pouco com as positions tanto absolute como relative, e os display:inline-block
Deus!
EDIT:
Esqueci-me de meter o código
Código (HTML):
CSS:
Código (CSS):
Nesta maneira funciona, o problema é ser responsive que fica tudo destruido.
Cumprimentos,
Pedro Cruz
Bem mais uma dúvida que me está a fazer um pouco confusão desde que estou a ver "Bootstrap" pela frente...
Basicamente, tenho de fazer isto. o meu problema, é por as coisas alinhadas, e claro, responsive.
Como posso fazer isto? já tentei o vertical-align:middle; e claro, jogar um pouco com as positions tanto absolute como relative, e os display:inline-block
Deus!
EDIT:
Esqueci-me de meter o código
Código (HTML):
<div class="container">
<div class="row">
<div class="box col-md-12 col-sm-12 col-xs-12">
<div class="col-md-3 col-xs-3">
<img src="~/img/exemp1.png" class="boximage" />
<img src="~/img/icons/building.png" class="iconbuilding" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="box col-md-12 col-sm-12 col-xs-12">
<div class="col-md-3 col-xs-3">
<img src="~/img/exemp1.png" class="boximage" />
<img src="~/img/icons/building.png" class="iconbuilding" />
</div>
</div>
</div>
</div>
CSS:
Código (CSS):
.box{
position:relative;
width:100%;
height:200px;
border:0px solid #FFFFFF;
border-radius:10px;
background-color: rgba(248,156,28, 0.25);
}
.box:before { /* create a full-height inline block pseudo=element */
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.boximage{
width:100%;
height:200px;
border:0px solid #FFFFFF;
border-radius:10px;
margin-left:-30px;
position:relative;
display:inline-block;
}
.boximage:before{
display:inline-block;
vertical-align:middle;
height:100%
}
.iconbuilding{
height:56px;
border:5px solid #FFFFFF;
border-radius:50%;
vertical-align:middle;
display:inline-block;
position:absolute;
margin-top:25%;
margin-left:-10%;
}
position:relative;
width:100%;
height:200px;
border:0px solid #FFFFFF;
border-radius:10px;
background-color: rgba(248,156,28, 0.25);
}
.box:before { /* create a full-height inline block pseudo=element */
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.boximage{
width:100%;
height:200px;
border:0px solid #FFFFFF;
border-radius:10px;
margin-left:-30px;
position:relative;
display:inline-block;
}
.boximage:before{
display:inline-block;
vertical-align:middle;
height:100%
}
.iconbuilding{
height:56px;
border:5px solid #FFFFFF;
border-radius:50%;
vertical-align:middle;
display:inline-block;
position:absolute;
margin-top:25%;
margin-left:-10%;
}
Nesta maneira funciona, o problema é ser responsive que fica tudo destruido.
Cumprimentos,
Pedro Cruz