text-alignが効かない、float-rightになってしまう

HTML
1      <div class="heading">
2        <h2>PRODUCT</h2>
3        <a href="#" class="btn more">MORE</a>
4      </div>

CSS
1.btn{
2  font-size: 12px;
3  color: #13191B;
4  letter-spacing: 2px;
5  float:right;
6  border: 1px solid #13191B;
7  padding: 15px 60px;
8}

①他のwrapperで上記のようにfloat-rightしてしまっているので
下記コードでfloat-leftが効きません。

また②btn-areaのtext-alignも効かず困っています・・・どうしたらいいでしょうか。
（ボタンを真ん中に3つ設置してその上に半円（の中に矢印の画像）を配置したい）

HTML
1<div class="btn-wrapper">
2        <div class="circle">
3          <a href="#">
4            <img src="paspol_images/up-chevron.png">
5          </a>
6        </div>
7        <div class="btn-area">
8          <a href="#" class="btn facebook">Share on Facebook</a>
9          <a href="#" class="btn twitter">Share on Twitter</a>
10          <a href="#" class="btn hatena">Hatena Bookmark</a>
11        </div>
12    </div>

CSS
1.circle {
2  width:50px;
3  height:25px;
4  border-radius:25px 25px 0 0;
5  background:#dd0000;
6}
7
8.circle img{
9  width:25px;
10  height:25px;
11  padding: 2px 0 0 12px;
12}
13
14.btn-area{
15  height:115px;
16  background-color: white;
17  text-align: center;
18  float: left;
19}
20
21.facebook {
22  color: #4871A9;
23  margin-right: 30px;
24  border: 1px solid #4871A9;
25}
26
27.facebook:hover{
28  background-color: #4871A9;
29}
30
31.twitter {
32  color: #70BDD3;
33  margin-right: 30px;
34  border: 1px solid #70BDD3;
35}
36
37.twitter:hover{
38  background-color: #70BDD3;
39}
40
41.hatena {
42  color: #449BCE;
43  border: 1px solid #449BCE;
44}
45
46.hatena:hover{
47  background-color: #449BCE;
48}

※実現したいデザイン

FrontEnd_Japan

2020/07/29 12:30

実現したいデザインがあると解りやすいです。

_arukuneko

2020/07/29 12:38

載せました！

行動規範の内容に同意します

回答2件

①他のwrapperで上記のようにfloat-rightしてしまっているので

下記コードでfloat-leftが効きません。

btnクラスが提示のHTMLにはないのでどこに設定しているのか不明ですが、もし横並びのためにfloatを使っているのなら、適切な箇所で解除しましょう。
ただ、横並びにfloatを使うのは古い手法です。現在ならFlexboxを使う方がシンプルにできます。

画像を見るとやりたいことは半円と３つのボタンを中央に配置したいということですよね。

css
1.circle {
2  width:50px;
3  height:25px;
4  border-radius:25px 25px 0 0;
5  background:#dd0000;
6  margin: 0 auto; /* 追加 */
7}
8
9.circle img{
10  width:25px;
11  height:25px;
12  padding: 2px 0 0 12px;
13}
14
15.btn-area{
16  height:115px;
17  background-color: white;
18  text-align: center;
19/*  float: left; 削除*/
20}