Düğmelerimin ve bağlantı noktalarının aynı görünmesini istiyorum. Ama bir düğme/çapa içinde uzun metnim olduğunda, metni dikey olarak ortalamalı ve kırmalı. Yeterli alan olduğunda metin de ortalanmalıdır. AmacıylaCSS: Bağlantı ve düğmenin dikey hizalanması
metin merkezli ve metin sonları i line-height:1
da ben vertical-align:1
set ve tabii ben metin kırmaz ve düğme taşacak durumdaki aksi white-space: normal
ayarlamak zorunda ayarlandığında taşan değil almak. metni çapa etiketinin içinde artık merkezli olmayacak tek bir satır ... ayrıca olduğunda ben metin kaydırma DOM (değiştirmek istemiyorsanız:
Düğmem neden düğmeden farklı davrandığımı anlatabilir misiniz? Krom denetçisindeki tüm stilleri zaten kontrol ettim (hesaplandı -> tümünü göster). Ayrıca :before
ve :after
stillerini de kontrol ettim.
.btn{
white-space: normal !important;
height: 45px !important;
vertical-align: middle !important;
line-height: 1 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-xs-2">
<a href="#" class="btn btn-default">test loooooooooooooooooooongstring<a>
<br /><br />
<button class="btn btn-default">test loooooooooooooooooooongstring</button>
</div>
</div>
<br /><br /><br />
<div class="row">
<div class="col-xs-12">
Should be centered!!
<br />
<a href="#" class="btn btn-default">test string<a>
<br /><br />
<button class="btn btn-default">test string</button>
</div>
</div>
GÜNCELLEME: Burada
olası bir çözüm ancak bu yan etkilere neden olur bilmiyorum:
.btn{
display: inline-flex;
align-items: center;
}
, dikey ama istiyorum evet hem –
için metin hizalanmış alabilirsiniz öyle olduysa Tamam, ekranı denedik – warch
yükseklik 45px (müşteri istek) ile düğmeleri: table-cell için .btn? –