質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

1174閲覧

要素の真ん中に配置されない

_arukuneko

総合スコア19

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/08/13 07:17

編集2020/08/13 10:14

more要素がdesign要素の真ん中に配置されません。

HTML

1 <div class="design"> 2 <a href="design.html" target="_blank"><img src="portfolio_images/portfolio_top.png"> 3 <div class="design-text"> 4 <p class="title">ポートフォリオ</p> 5 <p class="more">more</p> 6 </a> 7 </div> 8 </div>

CSS

1 2.design a img{ 3 width:100%; 4} 5 6.design{ 7 width:300px; 8 height:200px; 9 padding-bottom:34px; 10 position: relative; 11 overflow: hidden; 12} 13 14.design-text{ 15 width:300px; 16 height:200px; 17 position: absolute; 18 top: 0; 19 bottom: 0; 20 left: 0; 21 right: 0; 22 background: rgba(0,0,0,0.5); 23 opacity: 0; 24 display: flex; 25 align-items: center; 26} 27 28.design-text:hover{ 29 opacity: 1; 30 transition: all 0.6s ease; 31} 32 33.design-text a{ 34 margin: 0 auto; 35 color: #fff; 36} 37 38.title{ 39 font-size: 14px; 40} 41 42.more{ 43 margin-top:10px; 44 border: 1px #fff solid; 45 padding:5px; 46 font-size: 12px; 47 text-align: center; 48 width:60px; 49} 50 51.more:hover{ 52 background-color: white; 53 color: rgba(0,0,0,0.5); 54 transition: all 0.3s; 55}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

CSS

1.design-list{ 2 max-width: 1000px; 3 margin: 0 auto; 4 padding: 0 50px; 5 display: flex; 6 justify-content: space-between; 7 flex-wrap: wrap; 8} 9.design-item{ 10 width: 32%; 11 position: relative; 12 overflow: hidden; 13 margin-bottom: 80px; 14} 15.design-item a{ 16 color: #141414; 17 text-decoration: none; 18} 19.design-list-text{ 20 position: absolute; 21 top: 0; 22 bottom: 0; 23 left: 0; 24 right: 0; 25 background: rgba(0,0,0,0.5); 26 opacity: 0; 27 color: #fff; 28 text-align: center; 29 display: flex; 30 flex-direction: column; 31 justify-content: center; 32} 33.design-list-text:hover{ 34 opacity: 1; 35 transition: all 0.6s ease; 36} 37.title{ 38 padding-bottom: 10px; 39} 40.more{ 41 border: 1px #fff solid; 42 padding:5px; 43 font-size: 12px; 44 width:60px; 45} 46.more:hover{ 47 background-color: white; 48 color: rgba(0,0,0,0.5); 49 transition: all 0.3s; 50} 51.design-list-text p { 52 margin: 0 auto; 53}

投稿2020/08/28 02:44

_arukuneko

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

入力ミスかと思いますが現在のCSSが不明なのでどうしたいのか曖昧です。

自分は初心者なので参考程度に見ていただければいいですが…

p.more を div.design の真ん中に持ってきたいという話であれば、
div.design に幅を持たせる必要があり、もちろん p.more にも幅を持たせる必要があるように思います。

CSS

1.design { 2 width: 600px; 3} 4 5.design .design-text p.more { 6 width: 400px; 7 margin: 0 auto; 8}

例えばですが、このように親の幅が決められていて、p.moreにも幅が定められているなら、
marginの左右を auto と指定することで子のブロック要素は真ん中に配置されると思います。

もし意図しているものと違う回答でしたら、また詳しく教えてください。

投稿2020/08/13 07:46

編集2020/08/13 07:49
phiar_poet

総合スコア230

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問