jQuery水平對齊的div不居中

我得到了一個div與width:50%和一個文本
與jQuery我確定兩個寬度。jQuery水平對齊的div不居中

然後我試圖水平對齊與這個jQuery在div內的文本：

var wrapperWidth = $("#wrapper").width(); 
var textWidth = $("#text").width(); 
var horAlign = wrapperWidth/2 - textWidth; 
$("#text").css("margin-left", horAlign);

正如你可以看到我做它像在CSS margin-left: calc(mydiv - mytext)。但問題是，文本不居中。這裏有一個小提琴：

var r = (function() { 
 
    var wrapperWidth = $("#wrapper").width(); 
 
    var textWidth = $("#text").width(); 
 
    var horAlign = wrapperWidth/2 - textWidth; 
 
    $("#text").css("margin-left", horAlign); 
 
    
 
    var textHeight = $("#text").height(); 
 
    var vertAlign = textHeight/2 
 
    $("#text").css("margin-top", - vertAlign); 
 
}); 
 

 
$(document).ready(r); 
 
$(window).resize(r);

#wrapper{ 
 
    width:50%; 
 
    height:400px; 
 
    border:solid 5px black; 
 
    margin:auto; 
 
    margin-top:50px; 
 
} 
 

 
#text{ 
 
    font-family: Helvetica, Arial, Sans-Serif; 
 
    font-weight:bold; 
 
    text-transform:uppercase; 
 
    font-size:3.5em; 
 
    padding-left:30px; 
 
    padding-right:30px; 
 
    background:white; 
 
    display:inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <p id="text">Test</p> 
 
</div>

請告訴我爲什麼我做錯了什麼？

來源

2017-04-13 Tobias Glaus

如下更改計算：

var horAlign = wrapperWidth/2 - textWidth/2;

更重要的是，刪除padding，因爲它影響aligning

var r = (function() { 
 
    var wrapperWidth = $("#wrapper").width(); 
 
    var textWidth = $("#text").width(); 
 
    var horAlign = wrapperWidth/2 - textWidth/2; 
 
    $("#text").css("margin-left", horAlign); 
 
    
 
    var textHeight = $("#text").height(); 
 
    var vertAlign = textHeight/2 
 
    $("#text").css("margin-top", - vertAlign); 
 
}); 
 

 
$(document).ready(r); 
 
$(window).resize(r);

#wrapper{ 
 
    width:50%; 
 
    height:400px; 
 
    border:solid 5px black; 
 
    margin:auto; 
 
    margin-top:50px; 
 
} 
 

 
#text{ 
 
    font-family: Helvetica, Arial, Sans-Serif; 
 
    font-weight:bold; 
 
    text-transform:uppercase; 
 
    font-size:3.5em; 
 
    //padding-left:30px; 
 
    //padding-right:30px; 
 
    background:white; 
 
    display:inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <p id="text">Test</p> 
 
</div>

來源

2017-04-13 06:41:18 Arkej

我需要填充，所以行和文本之間有一些空白。我剛剛添加了 - 30像這樣的jQuery：'wrapperWidth/2 - textWidth/2 - 30;'完美的。謝謝:) –

是的，這也有效。關鍵是不要忘記考慮'填充「:) – Arkej

是的。我確實先忘了它。我想早上太早了;） –

你missd這裏什麼是你的2需要RO鴻溝輸出textWidth：

var horAlign = wrapperWidth/2 - textWidth/2; // please change your code to this.

來源

2017-04-13 06:36:30 AHBagheri

愚蠢的我。謝謝。 –

已經做到了;） –

我認爲你應該做這樣的事情：

var wrapperWidth = $("#wrapper").width(); 
var textWidth = $("#text").width(); 
var paddings = 60; 
var horAlign = (wrapperWidth - textWidth - paddings)/ 2 ;

，並記住墊襯！ var padding = 60;

來源

2017-04-13 06:42:25

也可以。謝謝 –

爲什麼不是一個CSS唯一的解決方案！？

#wrapper{ 
 
    width:50%; 
 
    height:400px; 
 
    border:solid 5px black; 
 
    margin:auto; 
 
    margin-top:50px; 
 
} 
 

 
#text{ 
 
    font-family: Helvetica, Arial, Sans-Serif; 
 
    font-weight:bold; 
 
    text-transform:uppercase; 
 
    font-size:3.5em; 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
#text span { 
 
    position: relative; 
 
    top: -35px; 
 
    display: inline-block; 
 
    padding-left:30px; 
 
    padding-right:30px; 
 
    background: white; 
 
}

<div id="wrapper"> 
 
    <div id="text"><span>Test</span></div> 
 
</div>

來源

2017-04-13 06:43:00 caramba

我不只使用CSS，因爲它將與CMS一起使用。所以用戶可以編輯文本及其大小。並且使用您的代碼，文本不會與該頂部邊界垂直對齊。但不錯的解決方案tho :) –

@TobiasGlaus它也將適用於不同的文本大小！你最好試試..垂直對齊可以是你想要的只是改變'頂部：-35px;'到任何你需要的東西。 – caramba

@TobiasGlaus用不同數量的文字看到小提琴https://jsfiddle.net/aox302cz/ – caramba

編輯了自己的腳本了一下，你的文字有填充所以要計算文本的寬度包括填充你應該使用innerWidth（）函數。希望這有助於:)

var r = (function() { 
 
    var wrapperWidth = $("#wrapper").width()/2; 
 
    var textWidth = $("#text").innerWidth()/2; 
 
    var horAlign = wrapperWidth - textWidth; 
 
    $("#text").css("margin-left", horAlign); 
 
    
 
    var textHeight = $("#text").height(); 
 
    var vertAlign = textHeight/2 
 
    $("#text").css("margin-top", - vertAlign); 
 
}); 
 

 
$(document).ready(r); 
 
$(window).resize(r);

#wrapper{ 
 
    width:50%; 
 
    height:400px; 
 
    border:solid 5px black; 
 
    margin:auto; 
 
    margin-top:50px; 
 
} 
 

 
#text{ 
 
    font-family: Helvetica, Arial, Sans-Serif; 
 
    font-weight:bold; 
 
    text-transform:uppercase; 
 
    font-size:3.5em; 
 
    padding-left:30px; 
 
    padding-right:30px; 
 
    background:white; 
 
    display:inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <p id="text">Test</p> 
 
</div>

來源

2017-04-13 06:52:40

美觀的解決方案也是如此。沒有想到使用innerWidth（）：D –

width()給你不包括填充的寬度。所以，你必須修改你的計算，以佔填充過這樣的：

，也是定心公式將是不同

var r = (function() { 
 
    var wrapperWidth = $("#wrapper").width(); 
 
    var textWidth = $("#text").width() + parseInt($('#text').css('padding-left')) + parseInt($('#text').css('padding-right')); 
 

 
    var horAlign = (wrapperWidth/2) - (textWidth/2); 
 

 
    $("#text").css("margin-left", horAlign); 
 

 
    var textHeight = $("#text").height(); 
 
    var vertAlign = textHeight/2 
 
    $("#text").css("margin-top", -vertAlign); 
 
}); 
 

 
$(document).ready(r); 
 
$(window).resize(r);

#wrapper { 
 
    width: 50%; 
 
    height: 400px; 
 
    border: solid 5px black; 
 
    margin: auto; 
 
    margin-top: 50px; 
 
} 
 

 
#text { 
 
    font-family: Helvetica, Arial, Sans-Serif; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    font-size: 3.5em; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    background: white; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <p id="text">Test</p> 
 
</div>

來源

2017-04-13 08:07:13

感謝您的幫助，但我更喜歡使用'innerWidth（）'。這包括填充。 –

哦，是的，我注意到了！ '：）' –

jQuery水平對齊的div不居中

回答

相關問題