DIV binnen een DIV overlapt rechts
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
#event-detail {
background-color: #FFFF00;
border-radius: 15px;
border: 1px solid #F5DEB3;
height: 60%;
width: calc(100% - 0px);
margin-auto;
margin-left: 10px;
margin-right: 90px;
}
background-color: #FFFF00;
border-radius: 15px;
border: 1px solid #F5DEB3;
height: 60%;
width: calc(100% - 0px);
margin-auto;
margin-left: 10px;
margin-right: 90px;
}
- SanThe - op 16/08/2017 14:51:41:
De border is 1px en margin is 10px links en 90px rechts.
Dan kom je op: 100% - 2xborder - margin.
Dat wordt dus 100% - 2px - 10px - 90px.
width: calc(100% - 102px);
Dan kom je op: 100% - 2xborder - margin.
Dat wordt dus 100% - 2px - 10px - 90px.
width: calc(100% - 102px);
Je hoeft dus geen 100% op te geven.
Als je de width weglaat krijg je het gewenste breedte op basis van de linker en rechter marge.
Maar nu wil ik een text-block zowel verticaal als horizontaal gecentreerd hebben.
Mijn probeersel staat hier
Op het internet staan diverse z.g.n. oplossingen maar geen enkele krijg ik werkent.
Iemand een idee??
https://jsfiddle.net/bsra1295/1/
Harry H Arends op 02/09/2017 16:18:01:
Iemand een idee??
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}