ホームページ制作について質問です。

背景の上にテキストを重ねてボタンを作成しています。
ボタンに矢印のデザインがあり、矢印とテキストの位置をきっちり横一列にそろえる為に
vertical-align="middle"
を使ってみたのですが、サファリでは vertical-align="middle"を記入しなくても横一列にそろっているのに、エクスプローラーでは vertical-align="middle"を記入してもまったくそろいません。
普段ピクセルと言う単位をつかっているのが悪いのかと思い単位をいろいろ変えてみましたが変化はありませんでした。
どのようにしたら解決するのでしょうか?
教えて下さい。宜しくお願い致します。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/07/08 02:05:27
  • 終了:2007/07/15 02:10:03

回答(3件)

id:yamats No.1

yamats回答回数247ベストアンサー獲得回数92007/07/08 08:00:00

ポイント27pt

これは、私の日記サイトの例ですが、

body {

background:url("");

font-family: Osaka,MS UI Gothic;

 font-size: 10pt;

scrollbar-3dlight-color:#ffffff;

scrollbar-arrow-color:#ffffff;

scrollbar-base-color:#ffffff;

scrollbar-darkshadow-color:#ffffff;

scrollbar-face-color:#ffffff;

scrollbar-highlight-color:#cccc99;

scrollbar-shadow-color:#ffffff;

}

span.highlight {

 color: black;

 background-color: yellow;

}

img.photo,img.hatena-fotolife {

 float: right;

 margin: 10px;

 border: 0;

 clear: right;

}

a.keyword {

 text-decoration: none;

 border-bottom: 0px ivory;

}

h1 {

font-size: 10pt;

}

h2 {

font-size: 10pt;

}

h3 {

font-family: Osaka,MS UI Gothic;

 font-size: 10pt;

}

br {

margin-left: 0px;

}

  • {

line-height: 100%;

}

span.canchor {

font-size: 10pt;

}

div.footnote {

font-family: Osaka,MS ゴシック;

font-size: 10pt;

}

img.asin {

 float: right;

 margin: 10px;

 border: 0;

}

div.comment div.caption {

border-bottom: none;

font-family: Osaka,MS ゴシック;

font-size: 10pt;

}

div.commentshort{

font-family: Osaka,MS ゴシック;

font-size: 10pt;

}

div.section p{

 text-indent: 0em;

 margin-left: 0px;

 margin-top:0;

 margin-bottom:0;

 padding-top:0;

 padding-bottom:0;

}

a.sectioncategory {

font-size: 10pt;

}

div.main {

 margin-left: 5%;

 margin-right: 10%;

}

div.sidebar {

 position: absolute;

 top: 0px;

 left: 0px;

 width: 80px;

 margin-left: 89%;

}

div.day {

 margin: 0% 5% 0% 0%;

 padding: 4px;

}

div.calendar {

 font-size: 100%;

 margin: 0% 5% 0% 0%;

 padding: 1%;

 text-align: right;

}

div.body blockquote {

 margin: 0% 30% 0% 0%;

 padding-top: 10px;

 padding-right: 10px;

 padding-bottom: 10px;

 padding-left: 10px;

}


このように、スタイルシートを使ってパーセンテージでそろえるのはいかがでしょうか?すぐに横一列にそろいますよ。

http://q.hatena.ne.jp/

id:makoohira No.2

makoohira回答回数136ベストアンサー獲得回数42007/07/08 10:49:20

ポイント27pt

cssで書かれているのでしたら、

vertical-align="middle"

vertical-align:middle;

に書き換えです。

htmlだけなら

vertical-align="middle"

align="middle"

に書き換えです。

それでも直らない場合は、

1.li要素にして、list-style-imageで、矢印画像を扱う。

2.矢印画像を背景に埋め込む、もしくは矢印画像も別の背景画像にして、2重背景にする。(IE6以下は透過PNGが使えないので、GIF限定になる)

3.背景画像を使ってるブロックにrerative、中身でabsoluteで配置する(下のリンクにある強引な方法)

http://blog.webcreativepark.net/2007/01/11-142005.html

などの策を試してください

id:aside No.3

aside回答回数339ベストアンサー獲得回数312007/07/09 13:05:41

ポイント26pt

ソースの書き方について、

style="vertical-align:middle;"

もしくは

valign="middle"

が正しいのでは?

テーブルをかませてみるとテキストと横一列

中央ぞろえになるみたいですが、、、

<table>
<tr>
<td><img height="50px" width="60px"></td>
<td>テスト</td>
</tr>
</table>


http://q.hatena.ne.jp/answer

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません