Selamlar, sorununuzu tam olarak kavrayamadım ama padding değerleri vermeyi denediniz mi?
Merhaba bişeyler denedim ama kodları ekliyorum css konusunda hiç iyi değilim
resimde gösterdiğim en yakın sonucu bu şekilde aldım ama stabil birşey değil malesef.
<style>
#resim {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-45px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi {
float: left;
display: inline-block;
margin-left:-48px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#resim1 {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-77px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi1 {
float: left;
display: inline-block;
margin-left:-80px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#resim2 {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-79px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi2 {
float: left;
display: inline-block;
margin-left:-82px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#resim3 {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-79px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi3 {
float: left;
display: inline-block;
margin-left:-82px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#resim4 {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-79px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi4 {
float: left;
display: inline-block;
margin-left:-82px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div id="yazi">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim" /></div>
<div id="yazi1">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim1" /></div>
<div id="yazi2">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim2" /></div>
<div id="yazi3">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim3" /></div>
<div id="yazi4">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim4" /></div>