在邊框內垂直居中文本

Question

我有一個程序可以根據用戶輸入動態更改 CSS 形狀的大小。 我也有文字標簽。 無論形狀的大小如何，我都試圖讓這個文本保持垂直居中。 這是我目前的問題，第一張圖還可以，但第二張圖不是我想要的。 我應該如何解決這個問題？

jsFiddle： https://jsfiddle.net/Kaevonz/dr7o1k3p/22/

 jQuery(document).ready(function($) { $(function() { $('.div3 span').hide(); $('.div5').hide(); $('.div5brother').hide(); function hideObjects($) { $('.div1').hide(); $('.div2').hide(); $('.div3').hide(); } function hideErrors($) { $('#error').hide(); $('#error2').hide(); $('#error3').hide(); $('#error4').hide(); $('#error5').hide(); } $(document).on('change', '#field_2w269, #field_wg4s2, #field_d6hwp', function() { mainCode() }) function mainCode() { const $multiplier = 7.5; //pixel sizing multiplier for user inputs //Declare Variables for User Inputs const $outer_diameter = parseFloat($("#field_wg4s2").val()); const $wall_thickness = parseFloat($("#field_d6hwp").val()); const $cutter_diameter = parseFloat($("#field_2w269").val()); //Convert diameters to radii const $cutter_radius = ($cutter_diameter / 2); const $pipeOutsideRadius = ($outer_diameter / 2); const $pipeInsideRadius = ($pipeOutsideRadius - $wall_thickness); //Find Cutter Travel const $cutterTravel = ($pipeOutsideRadius - (Math.sqrt(Math.pow($pipeInsideRadius, 2) - Math.pow($cutter_radius, 2)))); //Convert sizes for Visual Representation const $visualPipeOD = ($outer_diameter * $multiplier); const $visualWallThk = ($wall_thickness * $multiplier); const $visualPipeID = ($visualPipeOD - (2 * $visualWallThk)); const $visualCutDia = ($cutter_diameter * $multiplier); const $visualCutTravel = ($cutterTravel * $multiplier); if ($cutter_diameter > $outer_diameter) { $('#error').text('Cutter cannot be larger than Pipe OD').show(); hideObjects($); return false; } if ($visualCutDia > $visualPipeID) { $('#error2').text('Cutter cannot be larger than Pipe ID').show(); hideObjects($); return false; } if ($cutter_diameter < 0) { $('#error').text('Please input a positive value').show(); hideObjects($); return false; } if ($wall_thickness >= 0.33 * $outer_diameter) { $('#error4').text('Wall Thickness is invalid').show(); hideObjects($); return false; } $('#error4').hide(); if ($wall_thickness < 0) { $('#error3').text('Please input a positive value').show(); hideObjects($); return false; } if ($outer_diameter < 0) { $('#error').text('Please input a positive value').show(); hideObjects($); return false; } if ($cutter_diameter > 72) { $('#error').text('Cutter is too big.').show(); hideObjects($); return false; } if ($outer_diameter > 100) { $("#error").text($outer_diameter + " is too big").show(); hideObjects($); return false; } $('.div1').css({ height: ($visualCutTravel), width: ($visualCutDia) }); $('.div1').fadeIn(300); $('.div2').css({ height: ($visualPipeOD), width: ($visualPipeOD), }); $('.div2').fadeIn(300); $('.div3').css({ height: ($visualPipeID), width: ($visualPipeID), }); $('.div3').fadeIn(300); $('.div5').css({ height: ($visualCutTravel), width: ($visualCutDia) }); $('.div5brother').css({ height: ($visualCutTravel), right: (102.5 - $visualCutDia / 2 - 80), }); $('.div5brother').fadeIn(300); hideErrors($); } $(document).on('change', '#field_2w269', function() { $('.div1 span').fadeIn(100); }) $(document).on('change', '#field_wg4s2', function() { $('.div3 span').fadeIn(100); }) $(document).on('change', '#field_2w269', function() { $('.div5').fadeIn(100); }) }); });

 .container { display: flex; flex-direction: column; align-items: center; justify-content: start; height: 500px; border: 1px solid gray; }.elem { box-sizing: border-box; }.div1 { border-top: 3px solid #0DA8AA; border-left: 1px solid #0DA8AA; border-right: 1px solid #0DA8AA; height: 0px; background: white; }.div2 { border: 1px solid #0DA8AA; border-radius: 50%; width: 0px; height: 0px; background: white; display: flex; align-items: center; justify-content: center; position: relative; }.div3 { border: 1px solid #0DA8AA; border-radius: 50%; width: 0px; height: 0px; background: white; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }.div3>span { transform: translate(-10%, -55%) rotate(-45deg); font-size: 11px; }.div4 { border-top: 0.5px dashed black; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }.div5 { border: 0.5px dashed black; width: 120px; height: 90px; position: absolute; top: 0; transform: translateX(-50%); left: 50%; }.div5brother { position: absolute; top: 0; right: -80px; width: 80px; height: 50px; border-top: 1px solid black; border-bottom: 1px solid black; }.div5brother>span { font-size: 9px; line-height: 50px; display: block; position: absolute; top: 5px; right: -40px; text-transform: uppercase; }.div5container { width: 205px; height: 50px; position: absolute; top: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <p id="error"></p> <p id="error2"></p> <p id="error3"></p> <p id="error4"></p> <p id="error5"></p> <div class="elem div1"></div> <div class="elem div2"> <div class="elem div3"><span>Pipe OD</span> <div class="div5container"> <div class="elem div5"> </div> <div class="elem div5brother"> <span>Min. Cutter Travel</span> </div> </div> <div class="elem div4"> </div> </div> </div> </div> <input type="number" id="field_2w269" placeholder="Enter Cutter OD"> <br> <input type="number" id="field_wg4s2" placeholder="Enter Outer Diameter"> <br> <input type="number" id="field_d6hwp" placeholder="Enter Thickness"> <br> <input type="button" id="bttn" name="calculate" value="Calculate">

Answer 1

問題是 div.div5brother 的高度應該與 div.div5brother>span 的 line-height 相同。

因此，如果您使它們相等並刪除top: 5px; 從.div5brother > span styles 它應該可以工作。

 jQuery(document).ready(function($) { $(function() { $('.div3 span').hide(); $('.div5').hide(); $('.div5brother').hide(); function hideObjects($) { $('.div1').hide(); $('.div2').hide(); $('.div3').hide(); } function hideErrors($) { $('#error').hide(); $('#error2').hide(); $('#error3').hide(); $('#error4').hide(); $('#error5').hide(); } $(document).on('change', '#field_2w269, #field_wg4s2, #field_d6hwp', function() { mainCode() }) function mainCode() { const $multiplier = 7.5; //pixel sizing multiplier for user inputs //Declare Variables for User Inputs const $outer_diameter = parseFloat($("#field_wg4s2").val()); const $wall_thickness = parseFloat($("#field_d6hwp").val()); const $cutter_diameter = parseFloat($("#field_2w269").val()); //Convert diameters to radii const $cutter_radius = ($cutter_diameter / 2); const $pipeOutsideRadius = ($outer_diameter / 2); const $pipeInsideRadius = ($pipeOutsideRadius - $wall_thickness); //Find Cutter Travel const $cutterTravel = ($pipeOutsideRadius - (Math.sqrt(Math.pow($pipeInsideRadius, 2) - Math.pow($cutter_radius, 2)))); //Convert sizes for Visual Representation const $visualPipeOD = ($outer_diameter * $multiplier); const $visualWallThk = ($wall_thickness * $multiplier); const $visualPipeID = ($visualPipeOD - (2 * $visualWallThk)); const $visualCutDia = ($cutter_diameter * $multiplier); const $visualCutTravel = ($cutterTravel * $multiplier); if ($cutter_diameter > $outer_diameter) { $('#error').text('Cutter cannot be larger than Pipe OD').show(); hideObjects($); return false; } if ($visualCutDia > $visualPipeID) { $('#error2').text('Cutter cannot be larger than Pipe ID').show(); hideObjects($); return false; } if ($cutter_diameter < 0) { $('#error').text('Please input a positive value').show(); hideObjects($); return false; } if ($wall_thickness >= 0.33 * $outer_diameter) { $('#error4').text('Wall Thickness is invalid').show(); hideObjects($); return false; } $('#error4').hide(); if ($wall_thickness < 0) { $('#error3').text('Please input a positive value').show(); hideObjects($); return false; } if ($outer_diameter < 0) { $('#error').text('Please input a positive value').show(); hideObjects($); return false; } if ($cutter_diameter > 72) { $('#error').text('Cutter is too big.').show(); hideObjects($); return false; } if ($outer_diameter > 100) { $("#error").text($outer_diameter + " is too big").show(); hideObjects($); return false; } $('.div1').css({ height: ($visualCutTravel), width: ($visualCutDia) }); $('.div1').fadeIn(300); $('.div2').css({ height: ($visualPipeOD), width: ($visualPipeOD), }); $('.div2').fadeIn(300); $('.div3').css({ height: ($visualPipeID), width: ($visualPipeID), }); $('.div3').fadeIn(300); $('.div5').css({ height: ($visualCutTravel), width: ($visualCutDia) }); $('.div5brother').css({ height: ($visualCutTravel), right: (102.5-$visualCutDia/2-80), }); $('.div5brother > span').css({ lineHeight: `${$visualCutTravel}px`, }); $('.div5brother').fadeIn(300); hideErrors($); } $(document).on('change', '#field_2w269', function() { $('.div1 span').fadeIn(100); }) $(document).on('change', '#field_wg4s2', function() { $('.div3 span').fadeIn(100); }) $(document).on('change', '#field_2w269', function() { $('.div5').fadeIn(100); }) }); });

 .container { display: flex; flex-direction: column; align-items: center; justify-content: start; height: 500px; border: 1px solid gray; }.elem { box-sizing: border-box; }.div1 { border-top: 3px solid #0DA8AA; border-left: 1px solid #0DA8AA; border-right: 1px solid #0DA8AA; height: 0px; background: white; }.div2 { border: 1px solid #0DA8AA; border-radius: 50%; width: 0px; height: 0px; background: white; display: flex; align-items: center; justify-content: center; position: relative; }.div3 { border: 1px solid #0DA8AA; border-radius: 50%; width: 0px; height: 0px; background: white; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }.div3 > span { transform: translate(-10%, -55%) rotate(-45deg); font-size: 11px; }.div4 { border-top: 0.5px dashed black; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }.div5 { border: 0.5px dashed black; width: 120px; height: 90px; position: absolute; top: 0; transform: translateX(-50%); left: 50%; }.div5brother { position: absolute; top: 0; right: -80px; width: 80px; height: 50px; border-top: 1px solid black; border-bottom: 1px solid black; }.div5brother > span { font-size: 9px; line-height: 50px; display: block; position: absolute; right: -40px; text-transform: uppercase; }.div5container { width: 205px; height: 50px; position: absolute; top: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <p id="error"></p> <p id="error2"></p> <p id="error3"></p> <p id="error4"></p> <p id="error5"></p> <div class="elem div1"></div> <div class="elem div2"> <div class="elem div3"><span>Pipe OD</span> <div class="div5container"> <div class="elem div5"> </div> <div class="elem div5brother"> <span>Min. Cutter Travel</span> </div> </div> <div class="elem div4"> </div> </div> </div> </div> <input type="number" id="field_2w269" placeholder="Enter Cutter OD"> <br> <input type="number" id="field_wg4s2" placeholder="Enter Outer Diameter"> <br> <input type="number" id="field_d6hwp" placeholder="Enter Thickness"> <br> <input type="button" id="bttn" name="calculate" value="Calculate">

Answer 2

這里的主要問題是因為您在.div5brother元素上設置了固定高度，但這不會影響子span的高度/行高。

要解決此問題，您可以刪除該span並在.div5brother中的內容上使用 flex 定位：

.div5brother {
  /* other rules */
  font-size: 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-transform: uppercase;
}

話雖如此，還可以對您的代碼進行一些其他優化。

• 不要嵌套 document.ready 處理程序。 使用一個。
• 使用 CSS 規則在頁面加載時隱藏元素，而不是 JS。 這是為了避免頁面加載緩慢時出現 FOUC。
• 您不需要將 jQuery 引用傳遞給hideX()函數。
• 您不需要將每個數值/操作都包含在括號中。 刪除它們。
• 此外，您可以將公共類放在這些函數中引用的元素上，以使用單個選擇器來定位它們。
• 對於錯誤驗證，您可以將所有錯誤放入數組並動態生成p元素。 這使您可以更自由地顯示無限數量的錯誤，並更簡單地維護它們。

說了這么多，試試這個：

 jQuery($ => { let hideObjects = () => $('.object').hide(); let hideErrors = () => $('.error').hide(); let showErrors = errors => $('.container').append(errors.map(msg => `<p class="error">${msg}</p>`)); $(document).on('change', '.field', mainCode); function mainCode() { const $multiplier = 7.5; //pixel sizing multiplier for user inputs const $outer_diameter = parseFloat($("#field_wg4s2").val()); const $wall_thickness = parseFloat($("#field_d6hwp").val()); const $cutter_diameter = parseFloat($("#field_2w269").val()); //Convert diameters to radii const $cutter_radius = $cutter_diameter / 2; const $pipeOutsideRadius = $outer_diameter / 2; const $pipeInsideRadius = $pipeOutsideRadius - $wall_thickness; //Find Cutter Travel const $cutterTravel = $pipeOutsideRadius - (Math.sqrt(Math.pow($pipeInsideRadius, 2) - Math.pow($cutter_radius, 2))); //Convert sizes for Visual Representation const $visualPipeOD = $outer_diameter * $multiplier; const $visualWallThk = $wall_thickness * $multiplier; const $visualPipeID = $visualPipeOD - (2 * $visualWallThk); const $visualCutDia = $cutter_diameter * $multiplier; const $visualCutTravel = $cutterTravel * $multiplier; let validate = () => { let errors = []; $cutter_diameter > $outer_diameter && errors.push('Cutter cannot be larger than Pipe OD'); $visualCutDia > $visualPipeID && errors.push('Cutter cannot be larger than Pipe ID'); $cutter_diameter < 0 && errors.push('Please input a positive value'); $wall_thickness >= 0.33 * $outer_diameter && errors.push('Wall Thickness is invalid'); $wall_thickness < 0 && errors.push('Please input a positive value'); $outer_diameter < 0 && errors.push('Please input a positive value'); $cutter_diameter > 72 && errors.push('Cutter is too big.'); $outer_diameter > 100 && errors.push($outer_diameter + " is too big"); return { valid: errors.length === 0, errors: errors } } let updateUi = () => { $('.div1').css({ height: $visualCutTravel, width: $visualCutDia }).fadeIn(300); $('.div2').css({ height: $visualPipeOD, width: $visualPipeOD, }).fadeIn(300); $('.div3').css({ height: $visualPipeID, width: $visualPipeID, }).fadeIn(300); $('.div5').css({ height: $visualCutTravel, width: $visualCutDia }).fadeIn(300); $('.div5brother').css({ height: $visualCutTravel, right: 102.5 - $visualCutDia / 2 - 80, }); $('.div5container').fadeIn(300); } let validationResult = validate(); if (.validationResult;valid) { hideObjects(). showErrors(validationResult;errors); } else { updateUi(). } } $(document),on('change', '#field_2w269'. function() { $('.div1 span');fadeIn(100). }) $(document),on('change', '#field_wg4s2'. function() { $('.div3 span');fadeIn(100). }) $(document),on('change', '#field_2w269'. function() { $('.div5');fadeIn(100); }) })

 .container { display: flex; flex-direction: column; align-items: center; justify-content: start; height: 500px; border: 1px solid gray; }.elem { box-sizing: border-box; }.div1 { border-top: 3px solid #0DA8AA; border-left: 1px solid #0DA8AA; border-right: 1px solid #0DA8AA; height: 0px; background: white; }.div2 { border: 1px solid #0DA8AA; border-radius: 50%; width: 0px; height: 0px; background: white; display: flex; align-items: center; justify-content: center; position: relative; }.div3 { border: 1px solid #0DA8AA; border-radius: 50%; width: 0px; height: 0px; background: white; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }.div3>span { display: none; transform: translate(-10%, -55%) rotate(-45deg); font-size: 11px; }.div4 { border-top: 0.5px dashed black; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }.div5 { display: none; border: 0.5px dashed black; width: 120px; height: 90px; position: absolute; top: 0; transform: translateX(-50%); left: 50%; }.div5brother { position: absolute; top: 0; right: -80px; width: 80px; height: 50px; border-top: 1px solid black; border-bottom: 1px solid black; font-size: 9px; display: flex; flex-direction: column; justify-content: center; text-transform: uppercase; }.div5container { display: none; width: 205px; height: 50px; position: absolute; top: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="elem object div1"></div> <div class="elem object div2"> <div class="elem object div3"><span>Pipe OD</span> <div class="div5container object"> <div class="elem div5"></div> <div class="elem div5brother">Min. Cutter Travel</div> </div> <div class="elem div4"></div> </div> </div> </div> <input type="number" id="field_2w269" class="field" placeholder="Enter Cutter OD"> <br> <input type="number" id="field_wg4s2" class="field" placeholder="Enter Outer Diameter"> <br> <input type="number" id="field_d6hwp" class="field" placeholder="Enter Thickness"> <br> <input type="button" id="bttn" name="calculate" value="Calculate">

Answer 3

我將line-height設置為 50%，將top position 設置為 50%，以便它們在容器內相互抵消以適合中心。 我嘗試了幾種數字組合，無論我輸入什么，它似乎都有效。 我本可以使用相對定位和絕對定位的組合，但您已經做了很多絕對定位，所以我不想讓您的代碼更加復雜，尤其是因為結果是由動態值決定的。

 jQuery(document).ready(function($) { $(function() { $('.div3 span').hide(); $('.div5').hide(); $('.div5brother').hide(); function hideObjects($) { $('.div1').hide(); $('.div2').hide(); $('.div3').hide(); } function hideErrors($) { $('#error').hide(); $('#error2').hide(); $('#error3').hide(); $('#error4').hide(); $('#error5').hide(); } $(document).on('change', '#field_2w269, #field_wg4s2, #field_d6hwp', function() { mainCode() }) function mainCode() { const $multiplier = 7.5; //pixel sizing multiplier for user inputs //Declare Variables for User Inputs const $outer_diameter = parseFloat($("#field_wg4s2").val()); const $wall_thickness = parseFloat($("#field_d6hwp").val()); const $cutter_diameter = parseFloat($("#field_2w269").val()); //Convert diameters to radii const $cutter_radius = ($cutter_diameter / 2); const $pipeOutsideRadius = ($outer_diameter / 2); const $pipeInsideRadius = ($pipeOutsideRadius - $wall_thickness); //Find Cutter Travel const $cutterTravel = ($pipeOutsideRadius - (Math.sqrt(Math.pow($pipeInsideRadius, 2) - Math.pow($cutter_radius, 2)))); //Convert sizes for Visual Representation const $visualPipeOD = ($outer_diameter * $multiplier); const $visualWallThk = ($wall_thickness * $multiplier); const $visualPipeID = ($visualPipeOD - (2 * $visualWallThk)); const $visualCutDia = ($cutter_diameter * $multiplier); const $visualCutTravel = ($cutterTravel * $multiplier); if ($cutter_diameter > $outer_diameter) { $('#error').text('Cutter cannot be larger than Pipe OD').show(); hideObjects($); return false; } if ($visualCutDia > $visualPipeID) { $('#error2').text('Cutter cannot be larger than Pipe ID').show(); hideObjects($); return false; } if ($cutter_diameter < 0) { $('#error').text('Please input a positive value').show(); hideObjects($); return false; } if ($wall_thickness >= 0.33 * $outer_diameter) { $('#error4').text('Wall Thickness is invalid').show(); hideObjects($); return false; } $('#error4').hide(); if ($wall_thickness < 0) { $('#error3').text('Please input a positive value').show(); hideObjects($); return false; } if ($outer_diameter < 0) { $('#error').text('Please input a positive value').show(); hideObjects($); return false; } if ($cutter_diameter > 72) { $('#error').text('Cutter is too big.').show(); hideObjects($); return false; } if ($outer_diameter > 100) { $("#error").text($outer_diameter + " is too big").show(); hideObjects($); return false; } $('.div1').css({ height: ($visualCutTravel), width: ($visualCutDia) }); $('.div1').fadeIn(300); $('.div2').css({ height: ($visualPipeOD), width: ($visualPipeOD), }); $('.div2').fadeIn(300); $('.div3').css({ height: ($visualPipeID), width: ($visualPipeID), }); $('.div3').fadeIn(300); $('.div5').css({ height: ($visualCutTravel), width: ($visualCutDia) }); $('.div5brother').css({ height: ($visualCutTravel), right: (102.5 - $visualCutDia / 2 - 80), }); $('.div5brother').fadeIn(300); hideErrors($); } $(document).on('change', '#field_2w269', function() { $('.div1 span').fadeIn(100); }) $(document).on('change', '#field_wg4s2', function() { $('.div3 span').fadeIn(100); }) $(document).on('change', '#field_2w269', function() { $('.div5').fadeIn(100); }) }); });

 .container { display: flex; flex-direction: column; align-items: center; justify-content: start; height: 500px; border: 1px solid gray; }.elem { box-sizing: border-box; }.div1 { border-top: 3px solid #0DA8AA; border-left: 1px solid #0DA8AA; border-right: 1px solid #0DA8AA; height: 0px; background: white; }.div2 { border: 1px solid #0DA8AA; border-radius: 50%; width: 0px; height: 0px; background: white; display: flex; align-items: center; justify-content: center; position: relative; }.div3 { border: 1px solid #0DA8AA; border-radius: 50%; width: 0px; height: 0px; background: white; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }.div3>span { transform: translate(-10%, -55%) rotate(-45deg); font-size: 11px; }.div4 { border-top: 0.5px dashed black; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }.div5 { border: 0.5px dashed black; width: 120px; height: 90px; position: absolute; top: 0; transform: translateX(-50%); left: 50%; }.div5brother { position: absolute; top: 0; right: -80px; width: 80px; height: 50px; border-top: 1px solid black; border-bottom: 1px solid black; }.div5brother>span { font-size: 9px; display: block; position: absolute; line-height: 50%; top: 50%; right: -40px; text-transform: uppercase; }.div5container { width: 205px; height: 50px; position: absolute; top: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <p id="error"></p> <p id="error2"></p> <p id="error3"></p> <p id="error4"></p> <p id="error5"></p> <div class="elem div1"></div> <div class="elem div2"> <div class="elem div3"><span>Pipe OD</span> <div class="div5container"> <div class="elem div5"> </div> <div class="elem div5brother"> <span>Min. Cutter Travel</span> </div> </div> </div> <div class="elem div4"> </div> </div> </div> <input type="number" id="field_2w269" placeholder="Enter Cutter OD"> <br> <input type="number" id="field_wg4s2" placeholder="Enter Outer Diameter"> <br> <input type="number" id="field_d6hwp" placeholder="Enter Thickness"> <br> <input type="button" id="bttn" name="calculate" value="Calculate">