В центре слева выровненный текст с использованием javascript/jquery

В основном я пытаюсь сосредоточить все выровненные по левому краю тексты на основе ширины, получив ширину каждого из них, делая левое поле отрицательным на половину от ширины но сейчас он применяется только к первому абзацу.В центре слева выровненный текст с использованием javascript/jquery

Я пробовал использовать inline-block так, чтобы ширина была точной для текста, а не унаследованной ширины родителя? Я все же хочу, чтобы элементы блока вел себя как элементы блоков.

Как это можно применить ко всему тексту при загрузке страницы?

Кроме того, я хочу, чтобы это работало для всего текста на странице (p, li, pre,) есть лучший способ сделать это? Я мог бы просто перечислить все функции, которые я предполагаю.

<html> 
<head> 
<title>center left aligned text using javascript/jquery</title> 
<style type="text/css" media="screen"> 

* { 
    margin: 0; 
    padding: 0; 
} 

#container { 
    margin: 200px auto; 
    width: 1280px; 
    height: 800px; 
    border: #000 1px solid; 
} 

#container p { 
    background: #eee; 
    display: inline-block; 
    left: 50%; 
    max-width: 500px; 
    position: relative; 
} 

</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 

$(document).ready(function() { 

    $(function() { 
     var width = $("p").width(); 
     $('p').css('margin-left', -width/2); 
    }); 

}); 

</script> 
</head> 
<body> 
<div id="container"> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Lorem ipsum dolor sit amet.</p> 
</div> 
</body> 
</html>

EDIT: Если я вставить блок элемент после каждого, он ведет себя правильно

$("p").each(function() { 
    var width = $(this).width(); 
    $(this).after('<br />'); 
    $(this).css('margin-left', -width/2); 
});

источник

2013-05-30 Ryan

Это, кажется, работает отлично, вынимая 'встроенный блок '. Fiddle: http://jsfiddle.net/fEa4J/ Я что-то пропустил? – crush

в вашей скрипке, обратите внимание, что ширина абзацев не является фактической шириной текста, и это то, что я пытаюсь работать с – Ryan

О, я вижу. Не выбрал это в своем вопросе в первый раз. – crush

Вам нужен .each() цикл, чтобы найти ширину и применить наценку к каждому пункту в отдельности:

$("p").each(function() { 
    var width = $(this).width(); 
    $(this).css('margin-left', -width/2); 
});

http://jsfiddle.net/mblase75/Cg45A/

Это было сказано, если у вас есть inline-block применяется к параграфам, я не думаю, что они будут выглядеть так, как вы хотите. Как точно должен выглядеть ваш дизайн конца?

источник

2013-05-30 18:09:22 Blazemonger

Вы избили меня до .each(), я не могу поверить, как быстро люди отвечают на эти вопросы! Я держу пари, что это то, к чему он обращается: http://jsfiddle.net/sanpopo/YNJMs/ – Popo

Sanpopo, ваши абзацы имеют одинаковую ширину. Я хочу, чтобы текст вел себя так, как обычно, разрывы строк и все - единственная разница в том, что я хочу, чтобы он был центрирован на основе его ширины – Ryan

@ luke, разрывы строк основаны на ширине контейнера, хотя ... – crush

Я думаю, что это будет примерно так же близко, как вы можете получить, если вы добавить больше форматирования/элементов в разметке:

http://jsfiddle.net/sanpopo/rQG8c/

$(document).ready(function() { 
    $('p').each(function() { 
     var width = $(this).width(); 
     alert(width); 
     $(this).css({'margin-left': -width/2, 'text-align': 'center'}).after('<br /><br />');  
    }); 
});

источник

2013-05-30 20:19:31 Popo

В центре слева выровненный текст с использованием javascript/jquery

ответ

Смежные вопросы