痔になりやすい生活習慣とは?

HTML5, CSS3をベースに、添付画像(2)のような状態で作成したいなと思っております。

<ul>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○</a></li>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○○○○○○</a></li>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○</a></li>
</ul>

HTMLはこんな感じでシンプルに。
特に何もしなければ、
(1)のように画像のベースラインとテキストのベースラインが同じ位置に配置されます。
テキストが2行になると画像の下にずれ込みます。

しかし(2)のようにテキストをセンターに配置したいなと。
テキストは多くても2行でとどめるつもりなので、
1行でも2行でもセンターになるようにしたい。
ではと思ってまず思い浮かんだのが画像を「float: left」すること。
でもそうするとテキストがベースラインから回避できますが、
センターにはいかず、画像のトップと同じ位置に配置されます。

テキストが1行なら、反強制でPタグでくくって
「margin: top」で調整することもできるかと思いましたが、
2行分は設定したいのです。

ちなみに画像のサイズは指定しておりますが、
li自体には横幅の設定はしていますが高さ設定はしていません。
実質画像の高さが高さになることになります。

簡単にできることかと思っていたのですが、思いのほか苦戦しております。
ご存知の方いらっしゃいましたら、ご教授いただければ幸いです。
よろしくお願いいたします。

「画像横のテキストをセンターに配置したい」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (4件)

いわゆるtableで言うところの、vertical-align="middle" ですよ。


難しく考えないで、そのまま率直に、スタイルシートを書けば良いです。

個人的には、HTML5は古いブラウザには利きませんので、HTML4.01strictで十分だと思います。
サンプルはHTML5 + CSS2.1 です。文字コードはUTF-8
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )
で検証済み
★タブは_に置換してあるので戻す。
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="IRUKA">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5. …
<script src="http://css3-mediaqueries-js.googlecode.com/svn/t …
<![endif]-->
<style media="screen">
<!--
header nav ul{
list-style:none;
display:table;
border-collapse:separate;
border-spacing:3px;
width:200px;
margin:0 auto;
padding:0;
position:relative;
}
header nav ul li{
display:table-row;
}
header nav ul li a{
vertical-align:middle;
display:table-cell;
border:black 3px solid;
padding:2px 2px 2px 64px;
width:140px;
height:56px;
color:white;
background-color:black;
}
header nav ul li a:before{
position:absolute;
left:6px;
}
header nav ul li a[href="./a"]:before{content:url(./images/aa.gif);top:6px;}
header nav ul li a[href="./b"]:before{content:url(./images/bb.gif);top:75px}
header nav ul li a[href="./c"]:before{content:url(./images/cc.gif);top:144px}
header nav ul li a:hover{color:yellow;}
header nav ul li a:active{color:red;}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<nav>
___<ul>
____<li><a href="./a">あいうえおかきくけ</a></li>
____<li><a href="./b">こさしすせそたちつてとなにぬね</a></li>
____<li><a href="./c">のはひふへほ</a></li>
___</ul>
__</nav>
_</header>
_<section>
__<h2>A smaller heading</h2>
__<p>
__</p>
__<aside>
___<h2>Something aside</h2>
__</aside>
_</section>
_<section>
__<h2>A smaller heading</h2>
__<p>
__</p>
_</section>
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>
「画像横のテキストをセンターに配置したい」の回答画像4
    • good
    • 0
この回答へのお礼

ご回答ありがとうございました。
お礼が遅くなってしまってすみません。
助かりました、思うような形になりましたです!

お礼日時:2013/11/25 14:43

img と span に長さ制限をかけて、両者の合計値が親をはみ出さない様にしてはどうでしょう。


少々自由度が落ちてしまうのが欠点ですが

li { width:12em }
li a > img { vertical-align:middle; max-width:4em; }
li a > span { vertical-align:middle; max-width:8em; display:inline-block; }

<li> <a> <img> <span>長い文字列</span> </a>
    • good
    • 0
この回答へのお礼

ご回答ありがとうございました。
お礼が遅くなってしまってすみません。
思うような形にならず、でした。
重ね重ねありがとうございました。。

お礼日時:2013/11/25 14:42

最近のブラウザ限定になりますが



<a> <img> <span></span> </a>
の形にして、

a > img , a > span { display:inline-block; vertical-align:middle; }
はどうでしょうか
    • good
    • 0
この回答へのお礼

ご回答ありがとうございました。
1行だと確かにセンターにできました。
しかし2行になるとうまくいかず…
でも現状、このソースを使用させていただこうと思います。

お礼日時:2013/10/24 13:30

<table border=0 cellpadding=0 cellspacing=0>


<tr><td valign=center><a href="#"><img src="i.jpg" alt="#" width="60" height="60"></a></td><td valign=center><a href="#">○○○○○</td></tr>
<tr><td valign=center><a href="#"><img src="i.jpg" alt="#" width="60" height="60"></a></td><td valign=center><a href="#">○○○○○○○○○○</td></tr>
<tr><td valign=center><a href="#"><img src="i.jpg" alt="#" width="60" height="60"></a></td><td valign=center><a href="#">○○○○○</td></tr>
</table>

と書くのが確実で手っ取り早い。

配置に困ったら「見えないテーブルで強制配置」しよう。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございました。
確かに手っ取り早い手段ではありますが、
個人的に好ましくないと思いました。
恐縮です。

お礼日時:2013/10/24 13:29

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qul liのclass指定について

表示が上手くいかないのでお助け下さい。
ul liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、
なぜかclass指定をすると画像が消えてしまいます。
class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。
どなたか教えて頂けないでしょうか?

また、申し訳ありませんがとりあえず表示されれば良いだけなので
htmlやcssの記述に対する細かいツッこみは勘弁して下さい。

宜しくお願いします!


【html】

<div id="side">
<ul id="sidenav">
<li class="a"><a href="test.html">test</a></li>
</ul>
</div>

【css】

div#side {
display: inline;
float: left;
width: 178px;
margin-top: 20px;
text-align:center;
background:#fff;
}

div#side ul#sidenav {
list-style-type:none;
border: none;
}

div#side ul#sidenav li.a {
background:url(../common/side.gif) no-repeat left;
background-position: 6px 11px;
}

div#side li {
position:relative;
width: 165px;
height:40px;
padding: 1px;
margin: 5px;
text-align:left;
border: 1px solid #8c8c8c;
}

表示が上手くいかないのでお助け下さい。
ul liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、
なぜかclass指定をすると画像が消えてしまいます。
class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。
どなたか教えて頂けないでしょうか?

また、申し訳ありませんがとりあえず表示されれば良いだけなので
htmlやcssの記述に対する細かいツッこみは勘弁して下さい。

宜しくお願いします!


【html】

...続きを読む

Aベストアンサー

>class指定をしない状態ですと普通に表示されるのですが、
このスタイルシートの書き方はどうなってますか?

>div#side ul#sidenav li.a {
このセレクタの、background-positionを消してみるとどうなりますか?

Q箇条書きリストのすぐ横に画像を載せたい

初心者です。よろしくお願いいたします。

表題のとおりなのですが、

<img src="gazou.jpg" width="100" height="100" align="right">
<ol>
<li>りんご</li>
<li>みかん</li>
</ol>

・・・と記述すると確かに箇条書きリストの右側に画像が表示されるのですが画像が右端に表示されてしまいます(当然ですが・・・)箇条書きリストの少し横あたりに画像を表示させたいのですがなにか方法があるのでしょうか。このような微調整はむずかしいのでしょうか。
よろしくアドバイスお願いいたします。

Aベストアンサー

No1の補足です。

●箇条書きに対し、画像が一つずつの場合

<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD width="46%">りんご</TD>
<TD width="54%"><IMG border="0" src="gazou.jpg" width="43" height="39"></TD>
</TR>
<TR>
<TD width="46%">みかん</TD>
<TD width="54%"><IMG border="0" src="gazou.jpg" width="43" height="39"></TD>
</TR>
</TABLE>

●箇条書きに対し、画像が一つだけの場合

<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD width="46%">りんご</TD>
<TD width="54%" rowspan="2"><IMG border="0" src="gazou.jpg" width="43" height="39"></TD>
</TR>
<TR>
<TD width="46%">みかん</TD>
</TR>
</TABLE>
以上のような感じです。

No1の補足です。

●箇条書きに対し、画像が一つずつの場合

<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD width="46%">りんご</TD>
<TD width="54%"><IMG border="0" src="gazou.jpg" width="43" height="39"></TD>
</TR>
<TR>
<TD width="46%">みかん</TD>
<TD width="54%"><IMG border="0" src="gazou.jpg" width="43" height="39"></TD>
</TR>
</TABLE>

●箇条書きに対し、画像が一つだけの場合

<TABLE border="0" width="100%" cell...続きを読む

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Q画像の横に文章を表示する

画像の横に文章を表示したいのですがどういうHTMLを書けばいいのでしょうか?
こんな感じです↓(aを画像とする)
aaaaaこういうフウに
aaaaa画像の横に
aaaaa文を表示する。
教えてください。

Aベストアンサー

テーブルを使用しましょう。

<table>
<tr>
<td>
<img src="画像.jpg">
</td>
<td>
こういうフウに<br>
画像の横に<br>
文を表示する。<br>
</td>
</tr>
</table>

Q画像を複数横に並べ、かつそれぞれの画像の下に文字を表示する

はじめまして!!質問のとおりです。

画像を横に複数表示しつつ、さらにそれぞれの画像の下に文字を表示(それそれの画像の横幅の範囲内に)するには、どうすればいいのでしょうか??

回答よろしくお願いしますm(_ _)m

Aベストアンサー

TABLEタグで横並びの1画像ずつ区切ってみてはいかがでしょう?
最小の画像横幅より狭くTD の幅指定をして画像の下に回り込みで
テキストを入れる形を取りborder=0に指定すれば罫線は表示されません。

http://www.geocities.co.jp/SiliconValley-Bay/7770/file/hf.html
http://www.tagindex.com/hp_guide/menu/02.html

Qアイコンと文字を並べる時アイコンが上にずれる

アイコンと文字を並べる時アイコンが上にずれる
<img src="images/icon.png" alt="" ><a href="tenken.php">点検</a>
上記のようにアイコンを20×20で作ったら文字より上にずれてしまいます。
何か良い方法はないんでしょうか?

Aベストアンサー

font-sizeはおそらく16pxとか14pxとか、20pxよりは小さいでしょうから、
それだとアイコン画像の上部分がピョコンと出た状態になります。
まず、imgの位置を
img{vertical-align:top;}
として、
line-heihtを20pxに合わせればよござんしょう。

.hoge{
line-height:20px;
}
.hoge img{
vertical-align:top;
}

<p class="hoge">
<img src="images/icon.png" alt="" width="20" height="20"><a href="tenken.php">点検</a>
</p>

もしくは
<span class="hoge">
<img src="images/icon.png" alt="" width="20" height="20"><a href="tenken.php">点検</a>
</span>

とか。


これで文字が縦位置で中央に来るはず。

Q

CSSの質問です。

<ul>と<li>でリストマークを消すために
list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか?

どちらに設定してもリストマーク消えますけど。
どちらに設定したら規格上違反とかありますか?

Aベストアンサー

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Generated content, automatic numbering, and lists( http://www.w3.org/TR/CSS2/generate.html#propdef-list-style )]より

 OLとUL要素からLI要素に "のlist-style 'の値を転送し継承します。これは、リストのスタイル情報を指定するための推奨方法です

 このことから、ulないし、olに指定すると、その子孫のliに引き継がれるようですし、それが推奨されていて、どのブラウザもそれに従うようです。実際、最初にも書きましたようにブラウザのデフォルトの捨て要るシートもulに対して指定しているようです。

 listのスタイルシートは他にも問題があって、liを字下げして表示するブラウザが多いのですが、その字下げをmarginを使うか、paddingを使うか、それをul,olに対してか、liに対してかもブラウザによって差があります。
 そこで、私は、
div.nav ul,div.nav ul,div.nav li{display:block;list-style:none;margin:0;padding:0;}
といったんリセットしてから、様々な指定を付け加えていくことにしています。

 文法的にも正しいし、かつブラウザ間の実装の差も吸収できますから・・

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values fr...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング