他の要素をそのまま維持しながら、1つの子要素を中央揃えにします。

Question

コンテンツの一部を非表示にして表示するための[続きを読む]ボタンがあります。どちらが期待どおりに動作しています。私の問題は、ページの残りの部分を左に揃えて、ボタンを中央に揃えたいということです。ここで

は私が整列内容を維持しながら、中央に「続きを読む」と「レスを読んで」ボタンを整列する

// Hide the extra content initially, using JS so that if JS is disabled, no problemo: 
 
$('.read-more-content').addClass('hide') 
 
$('.read-more-show, .read-more-hide').removeClass('hide') 
 

 
// Set up the toggle effect: 
 
$('.read-more-show').on('click', function(e) { 
 
    $(this).next('.read-more-content').removeClass('hide'); 
 
    $(this).addClass('hide'); 
 
    e.preventDefault(); 
 
}); 
 

 
// Changes contributed by @diego-rzg 
 
$('.read-more-hide').on('click', function(e) { 
 
    var p = $(this).parent('.read-more-content'); 
 
    p.addClass('hide'); 
 
    p.prev('.read-more-show').removeClass('hide'); // Hide only the preceding "Read More" 
 
    e.preventDefault(); 
 
});

div{ 
 
display: block; 
 
margin: 20px 0; 
 
} 
 

 
p { 
 
    border-bottom: 1px solid black; 
 
    padding: 20px; 
 
} 
 

 
.hide { 
 
    display: none; 
 
} 
 

 
a{ 
 
    color: white; 
 
    background: blue; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div>Egestas mollitia quos metus natus assumenda ullam suscipit ultricies. Voluptas, nihil natoque elementum error ligula exercitationem aliquid tempor mauris penatibus. Suspendisse! Rutrum volutpat adipiscing nascetur cras conubia cupidatat! Pede voluptatibus tristique adipiscing, eleifend vestibulum, dolore, eveniet facilis ipsa, deleniti sit repudiandae temporibus esse hic! Primis phasellus ut vestibulum pellentesque condimentum laboris sed? Molestie torquent, occaecati natoque, quisque nostra sunt, nibh, consequuntur turpis eros aut justo qui recusandae eos, soluta repellat ipsa tortor tempus ultrices dis, unde voluptates venenatis placeat praesent suscipit maxime, lacus eleifend? Iste nisi fermentum! Corporis accusamus dictum! Sapien laboris massa fugit deserunt laboriosam mi consectetur curabitur cum.</div> 
 
<a class="read-more-show hide" href="#">Read More</a> 
 
<span class="read-more-content"> 
 
<div>Egestas mollitia quos metus natus assumenda ullam suscipit ultricies. Voluptas, nihil natoque elementum error ligula exercitationem aliquid tempor mauris penatibus. Suspendisse! Rutrum volutpat adipiscing nascetur cras conubia cupidatat! 
 
</div> 
 
<a class="read-more-hide hide" href="#">Read Less</a></span>

....私が今持っているものです左に。どんな助けやアイデアが素晴らしいだろう！みんなありがとう！あなたのa.read-よりショーのクラススタイルで

Answer 1

：

// Hide the extra content initially, using JS so that if JS is disabled, no problemo: 
 
$('.read-more-content').addClass('hide') 
 
$('.read-more-show, .read-more-hide').removeClass('hide') 
 

 
// Set up the toggle effect: 
 
$('.read-more-show').on('click', function(e) { 
 
    $(this).next('.read-more-content').removeClass('hide'); 
 
    $(this).addClass('hide'); 
 
    e.preventDefault(); 
 
}); 
 

 
// Changes contributed by @diego-rzg 
 
$('.read-more-hide').on('click', function(e) { 
 
    var p = $(this).parent('.read-more-content'); 
 
    p.addClass('hide'); 
 
    p.prev('.read-more-show').removeClass('hide'); // Hide only the preceding "Read More" 
 
    e.preventDefault(); 
 
});

div { 
 
    display: block; 
 
    margin: 20px 0; 
 
} 
 

 
p { 
 
    border-bottom: 1px solid black; 
 
    padding: 20px; 
 
} 
 

 
.hide { 
 
    display: none; 
 
} 
 

 
a { 
 
    color: white; 
 
    background: blue; 
 
    padding: 5px; 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div>Egestas mollitia quos metus natus assumenda ullam suscipit ultricies. Voluptas, nihil natoque elementum error ligula exercitationem aliquid tempor mauris penatibus. Suspendisse! Rutrum volutpat adipiscing nascetur cras conubia cupidatat! Pede voluptatibus tristique adipiscing, eleifend vestibulum, dolore, eveniet facilis ipsa, deleniti sit repudiandae temporibus esse hic! Primis phasellus ut vestibulum pellentesque condimentum laboris sed? Molestie torquent, occaecati natoque, quisque nostra sunt, nibh, consequuntur turpis eros aut justo qui recusandae eos, soluta repellat ipsa tortor tempus ultrices dis, unde voluptates venenatis placeat praesent suscipit maxime, lacus eleifend? Iste nisi fermentum! Corporis accusamus dictum! Sapien laboris massa fugit deserunt laboriosam mi consectetur curabitur cum.</div> 
 
<a class="read-more-show hide" href="#">Read More</a> 
 
<span class="read-more-content"> 
 
<div>Egestas mollitia quos metus natus assumenda ullam suscipit ultricies. Voluptas, nihil natoque elementum error ligula exercitationem aliquid tempor mauris penatibus. Suspendisse! Rutrum volutpat adipiscing nascetur cras conubia cupidatat! 
 
</div> 
 
<a class="read-more-hide hide" href="#">Read Less</a></span>

Answer 2

、次の行を追加します。

.read-more-show { 
    display: table; 
    margin: 0 auto; 
} 

Answer 3

あなたがボタンに次のCSSを追加することができます。続きを読む/レスを読む

text-align: center; 
display: block; 
margin: 0 auto; 
width: 100px; 

Answer 4

場所アンカーを<div class="center></div>に追加し、次のスタイリングをセンタークラスに追加してください。.center { width: 100px; margin: 0 auto; }

margin: 0 auto;エレメントがの幅に設定されていることを確認してください。あなたはポジショニングでそれを行うことができます

// Hide the extra content initially, using JS so that if JS is disabled, no problemo: 
 
$('.read-more-content').addClass('hide') 
 
$('.read-more-show, .read-more-hide').removeClass('hide') 
 

 
// Set up the toggle effect: 
 
$('.read-more-show').on('click', function(e) { 
 
    $(this).next('.read-more-content').removeClass('hide'); 
 
    $(this).addClass('hide'); 
 
    e.preventDefault(); 
 
}); 
 

 
// Changes contributed by @diego-rzg 
 
$('.read-more-hide').on('click', function(e) { 
 
    var p = $(this).parent('.read-more-content'); 
 
    p.addClass('hide'); 
 
    p.prev('.read-more-show').removeClass('hide'); // Hide only the preceding "Read More" 
 
    e.preventDefault(); 
 
});

div{ 
 
display: block; 
 
margin: 20px 0; 
 
} 
 

 
p { 
 
    border-bottom: 1px solid black; 
 
    padding: 20px; 
 
} 
 

 
.hide { 
 
    display: none; 
 
} 
 

 
a{ 
 
    color: white; 
 
    background: blue; 
 
    padding: 5px; 
 
} 
 
.center { 
 
width: 100px; 
 
margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div>Egestas mollitia quos metus natus assumenda ullam suscipit ultricies. Voluptas, nihil natoque elementum error ligula exercitationem aliquid tempor mauris penatibus. Suspendisse! Rutrum volutpat adipiscing nascetur cras conubia cupidatat! Pede voluptatibus tristique adipiscing, eleifend vestibulum, dolore, eveniet facilis ipsa, deleniti sit repudiandae temporibus esse hic! Primis phasellus ut vestibulum pellentesque condimentum laboris sed? Molestie torquent, occaecati natoque, quisque nostra sunt, nibh, consequuntur turpis eros aut justo qui recusandae eos, soluta repellat ipsa tortor tempus ultrices dis, unde voluptates venenatis placeat praesent suscipit maxime, lacus eleifend? Iste nisi fermentum! Corporis accusamus dictum! Sapien laboris massa fugit deserunt laboriosam mi consectetur curabitur cum.</div> 
 
<div class="center"><a class="read-more-show hide" href="#">Read More</a></div> 
 
<span class="read-more-content"> 
 
<div>Egestas mollitia quos metus natus assumenda ullam suscipit ultricies. Voluptas, nihil natoque elementum error ligula exercitationem aliquid tempor mauris penatibus. Suspendisse! Rutrum volutpat adipiscing nascetur cras conubia cupidatat! 
 
</div> 
 
<div class="center"><a class="read-more-hide hide" href="#">Read Less</a></div></span>