Суть вопроса такова. Есть код:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Спойлеры</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
$(this).parent().children('div.spoiler_body').slideToggle('slow');
return false;
});
});
</script>
<style type="text/css">
.spoiler_body {
display:none;
text-align: center;
}
.spoiler_links {
display: block;
font-size: 36pt;
text-align: center;
text-decoration: none;
color: #000;
cursor:pointer;
}
.spoiler_links:hover {
color: #060;
}
</style>
</head>
<body>
<div>
<a href="" class="spoiler_links">Название спойлера</a>
<div class="spoiler_body">
<img src="http://www.blogcdn.com/massively.joystiq.com/media/2011/10/facepalm.jpg" alt="" />
</div>
</div>
</body>
</html>
Нужно сделать следующие изменения:
Добавить настраиваемый отступ подчеркивания и изменить его цвет (цвет подчеркивания не должен совпадать с цветом текста)
Так же добавить функцию изменения цвета текста при наведении, и при раскрытом виде спойлера.
Вся эта конструкция должна выравниваться посередине экрана.
Пробовал разные варианты, но каждый раз одно из условий не соблюдалось. То перенос слов образовывался, то подчеркивание не реагировало на настройки,, то появлялось выравнивание по левому краю, то еще что то. В итоге налепил восьмиэтажный код, который, ко всему прочему, и работал неправильно.
Показываю Вам базовый вариант. Надеюсь умные люди подскажут.