マージンを無くして上に詰めたい

bootstrapについて、wellの中に四角があります。四角の中にhelloという文字があります。

・wellと四角の間には空白があります。この空白を無くし上につめ(四角のtopをwellのtopにくっつける)、右に20pxほど
移動させるにはどうしたらいいでしょうか？

・四角の中の文字を真ん中にもってきたいのですが、text-align:centerでは中央になりませんでした。どのようにすれば
よいでしょうか？

HTML

<body>
    <section class="sec1 well">
      <div class="icon1">Hello</div>
      </section>
</body>

CSS

 .sec1{background:#00bfff}
 .icon1 { width: 100px; height: 100px; background: red;text-align: center;}

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

回答2件

ベストアンサー

wellクラスにpadding :19px; があるからでしょうか。

.sec1{
	padding-top: 0px;
	background:#00bfff;
}

テキストの垂直方向の中段化は、テキストが1行であれば次のようにできます。

.icon1 {
	width: 100px; 
	height: 100px;
	background: red;
	vertical-align:middle;
	line-height: 100px;
}

投稿2017/05/17 01:15

総合スコア12011

退会済みユーザー

2017/05/17 01:44

ご回答ありがとうございます。padding-top:10pxで無事に解決しました。助かりました。

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

selectionのpaddingを調整してみては？

CSS
1 .sec1{background:#00bfff;padding:0px;}

投稿2017/05/17 01:02

総合スコア114968

退会済みユーザー

2017/05/17 01:45

paddingを調整したら解決しました。ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問