Q&A
PHPというよりHTML,CSSですね。タグを編集してください。
削除のボタンをもう少し上の方に移動したいです。
画像の右に削除のボタンがあるのですが、画像の右真ん中に削除ボタンを置きたいです。
album2.php
php:
1<?php 2$images = array (); 3// 1ページに表示する画像の枚数 4$num = 3; 5 6// albumフォルダをオープンにする 7// $handleにディレクトリハンドルが入っている 8// opendir(フォルダ名)⇒戻り値ディレクトリハンドル 9if ($handle = opendir ( './album' )) { 10// readdir(ディレクトリハンドル)⇒指定したディレクトリのファイル一覧を取得する 11// ファイル名をどんどん取得する 12 while ( $entry = readdir ( $handle ) ) { 13 // 現在のディレクトリの.or..を除いた全てのファイル名リストを 14 // $imagesに格納している 15 if ($entry != "." && $entry != "..") { 16// $entry⇒readdirで取得したファイル名が沢山格納されている。 17// それを$images配列に格納。 18 $images [] = $entry; 19 } 20 } 21 // ディレクトリハンドルをクローズする 22 closedir ( $handle ); 23 rsort($images); 24} 25 26?> 27 28<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 29"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 30<html xm1ns="http://www.w3.org/1999/xhtml"> 31<html lang="ja"> 32<head> 33<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 34<meta http-equiv="Content-Script-Type" content="text/javascript"> 35 36 37 <title>アルバム</title> 38 <style type="text/css"> 39<!-- 40html,body { 41 background-color: transparent; 42 scrollbar-arrow-color: #ffccff; 43 scrollbar-face-color: #ffcccc; 44 scrollbar-3dlight-color: #ffffff; 45 scrollbar-darkshadow-color: #ffcccc; 46 scrollbar-highlight-color: #ff9999; 47 scrollbar-shadow-color: #ff9999; 48 scrollbar-track-color: #ffffff; 49} 50 51--> 52p#submit_btn { 53 text-align: center; 54 font-family: "あずきフォント"; 55} 56 57.content { 58 /* margin-left: 137px; */ 59 margin-top: 0px; 60 font-size: 95%; 61 font-weight: bold; 62 font-family: "あずきフォント"; 63 /* color: #6c2735; */ 64 color: #f3b3e6; 65} 66 67.form { 68 color: white; 69 background-color: #9FD6D2; 70 text-align: center; 71 /* padding-left: 370px; */ 72 padding-top: 5px; 73 padding-bottom: 5px; 74 font-weight: bold; 75 font-size: 95%; 76 width: 825px; 77 font-family: "あずきフォント"; 78} 79 80.textform { 81 margin-left: 68px; 82} 83 84.textform_postalCode { 85 margin-left: 30px; 86} 87 88.textstyle { 89 font-size: 95%; 90 /* color: #6c2735; */ 91 color: #f7c2c2; 92 font-weight: bold; 93 font-family: "あずきフォント"; 94} 95 96.required { 97 font-size: 87%; 98 font-weight: normal; 99 color: red; 100 font-family: "あずきフォント"; 101} 102 103#heading { 104 /* border-left: 10px solid #6c2735; */ 105 /* border-bottom: medium solid #6c2735; */ 106 border-left: 10px solid #6c2735; 107 border-bottom: medium solid #f7c2c2; 108 color: #f7c2c2; 109 /* color: #cc528b; */ 110 font-family: "あずきフォント"; 111 -ms-font-feature-settings: "normal"; 112} 113/* 送信ボタン */ 114input[type="submit"] { 115 padding: 10px 20px; 116 border: none; 117 /* background: #9FD6D2; */ 118 background: #f7c2c2; 119 color: #fff; 120 font-family: "あずきフォント"; 121} 122 123/* 送信ボタン - マウスオーバー時 */ 124input[type="submit"]:hover { 125 /* background: #54A9BD; */ 126 background: #ff9b9f; 127 font-family: "あずきフォント"; 128} 129 130/* 送信ボタン - 押せないとき */ 131input[type="submit"][disabled] { 132 background-color: #ccc; 133 cursor: default; 134 font-family: "あずきフォント"; 135} 136 137input.example,select { 138 width: 250px; 139 font-family: "あずきフォント"; 140} 141 142.title_a { 143 color: #f7c2c2; 144 font-weight: bold; 145 font-family: "あずきフォント"; 146} 147 148textarea { 149 width: 480px; 150 font-family: "あずきフォント"; 151} 152 153.styled-select select { 154 background: transparent; 155 width: 268px; 156 padding: 5px; 157 font-size: 16px; 158 line-height: 1; 159 border: 0; 160 border-radius: 0; 161 height: 34px; 162 -webkit-appearance: none; 163} 164/* select{ */ 165/* color: white; */ 166/* background-color: #f3b3e6; */ 167/* } */ 168/* カーソルをあてた時に変わる色 */ 169input:focus,select:focus,textarea:focus { 170 background-color: #f7c2c2; 171 /* background-color: #f2dae8; */ 172 font-family: "あずきフォント"; 173 border: solid 1px #cc528b; 174} 175/*検索ボタン*/ 176input[type="button"] { 177 background: #f7c2c2; 178 color: white; 179 /* width: 55px; */ 180 height: 30px; 181 border: 0; 182 line-height: 30px; 183 font-family: "あずきフォント"; 184} 185 186input[type="button"]:hover { 187 background: #ff9b9f; 188 height: 30px; 189 color: #fff; 190 border: 0; 191 cursor: pointer; 192 font-family: "あずきフォント"; 193} 194 195input[type="button"].disabled { 196 background: #f7c2c2; 197 cursor: default; 198} 199 200input[type="button"].disabled:hover { 201 background: #f7c2c2; 202 font-family: "あずきフォント"; 203} 204/* @font-face { */ 205/* font-family: あずきフォント; */ 206/* src: url(azuki.ttf) format("truetype"); */ 207/* url(azuki.woff) format("woff"); /* Modern Browsers */ 208* 209/ 210/* } */ 211 212 213@font-face { 214 font-family: 'あずきフォント'; /* お好きな名前に */ 215 src: url('azuki.eot'); /* IE9以上用 */ 216 src: url('azuki.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */ 217 url('azuki.woff') format('woff'), /* モダンブラウザ用 */ 218 url('azuki.ttf') format('truetype'); /* iOS, Android用 */ 219} 220 221.stepBar { 222 position: relative; 223 list-style: none; 224 margin: 0 0 1em; 225 padding: 0; 226 text-align: center; 227 width: 100%; 228 overflow: hidden; 229 *zoom: 1; 230 font-family: "あずきフォント"; 231} 232 233.stepBar .step { 234 position: relative; 235 float: left; 236 display: inline-block; 237 line-height: 40px; 238 padding: 0 40px 0 20px; 239 background-color: #eee; 240 -moz-box-sizing: border-box; 241 -webkit-box-sizing: border-box; 242 box-sizing: border-box; 243} 244 245.stepBar .step:before,.stepBar .step:after { 246 position: absolute; 247 left: -15px; 248 display: block; 249 content: ''; 250 background-color: #eee; 251 border-left: 4px solid #FFF; 252 width: 20px; 253 height: 20px; 254} 255 256.stepBar .step:after { 257 top: 0; 258 -moz-transform: skew(30deg); 259 -ms-transform: skew(30deg); 260 -webkit-transform: skew(30deg); 261 transform: skew(30deg); 262} 263 264.stepBar .step:before { 265 bottom: 0; 266 -moz-transform: skew(-30deg); 267 -ms-transform: skew(-30deg); 268 -webkit-transform: skew(-30deg); 269 transform: skew(-30deg); 270} 271 272.stepBar .step:first-child { 273 -moz-border-radius-topleft: 4px; 274 -webkit-border-top-left-radius: 4px; 275 border-top-left-radius: 4px; 276 -moz-border-radius-bottomleft: 4px; 277 -webkit-border-bottom-left-radius: 4px; 278 border-bottom-left-radius: 4px; 279} 280 281.stepBar .step:first-child:before,.stepBar .step:first-child:after { 282 content: none; 283} 284 285.stepBar .step:last-child { 286 -moz-border-radius-topright: 4px; 287 -webkit-border-top-right-radius: 4px; 288 border-top-right-radius: 4px; 289 -moz-border-radius-bottomright: 4px; 290 -webkit-border-bottom-right-radius: 4px; 291 border-bottom-right-radius: 4px; 292} 293 294.stepBar .step.current { 295 color: #FFF; 296 background-color: #6c2735; 297 font-family: "あずきフォント"; 298} 299 300.stepBar:hover { 301 background-color: #DEC8B1'; 302} 303 304.stepBar .step.current:before,.stepBar .step.current:after { 305 background-color: #6c2735; onmouseover ="style.background='#DEC8B1'"; 306 onmouseout ="style.background='#6c2735'"; 307 font-family: "あずきフォント"; 308} 309 310.stepBar.step2 .step { 311 width: 50%; 312} 313 314.stepBar.step3 .step { 315 width: 33.333%; 316} 317 318.stepBar.step4 .step { 319 width: 25%; 320} 321 322.stepBar.step5 .step { 323 width: 20%; 324} 325 326div.img-move a:hover { 327 position: relative; 328 top: -1px; 329 left: -1px; 330} 331 332div.img-move a:active { 333 position: relative; 334 top: 5px; 335 left: 5px; 336} 337</style> 338 339</head> 340<body> 341 <h1 class="title_a">アルバム</h1> 342 <p class="textstyle"> 343 <a href="upload2.php">写真をアップロードする</a> 344 </p> 345 <p class="textstyle">削除ボタンを押すと、画像が削除出来ます。</p> 346<!-- <FORM> --> 347<!-- <INPUT TYPE="button" VALUE="更新" onClick="window.location.reload();">--> 348<!-- </FORM> --> 349 <?php 350if($_POST){ 351if(isset($_POST['command']) || $_POST['command'] == 'delete'){ 352 $filename = './album/'.$_POST['id']; 353 if(file_exists($filename)){ 354// unlink('./album/',$_POST['id']); 355 unlink($filename); 356// unlink('./album/',$_POST['id']); 357// header ( 'Location:album2_redirect.php' ); 358 echo ' <p class="textstyle">削除しました。更新ボタンを押してください。</p>'; 359 echo '<FORM><INPUT TYPE="button" VALUE="更新" onClick="window.location.reload();"></FORM>'; 360 unset($_POST); 361// header("Location: ./album2.php"); 362// echo '<script type=”text/javascript”>window.location.reload();</script>’; 363 } 364} 365} 366?> 367<table bordercolor="hotpink" border="1" cellspacing="0" cellpadding="5"> 368<tr><td bgcolor="mistyrose" align="center"><font color="deeppink" size="2"><font size="1"><sup>●</sup></font> <b>A L B U M</b> <font size="1"><sub>●</sub></font></font></td></tr> 369<tr><td align="center"> 370<!-- <caption class="font2">アルバム</caption> --> 371<?php 372if(count($images) > 0){ 373 $images = array_chunk ( $images, $num ); 374 $page = 0; 375 if (isset ( $_GET ['page'] ) && is_numeric ( $_GET ['page'] )) { 376 $page = intval ( $_GET ['page'] ) - 1; 377 if (! isset ( $images [$page] )) { 378 $page = 0; 379 } 380 } 381 // 画像の表示 382 foreach ( $images [$page] as $img ) { 383 echo '<form action="" method="post">'; 384 echo '<tr>'; 385 echo '<td align="center"><img src="./album/' . $img . '"><input type="hidden" name="command" value="delete"><input type="hidden" name="id" value="',$img,'">',' <button type="submit" style="border: 1px solid #902342; color: #902342; background-color: #f2dae8;">削除</button></td>'; 386 echo '</tr>'; 387 echo '</form>'; 388 echo "\n"; 389 } 390 echo '<p>'; 391 for($i = 1; $i <= count ( $images ); $i ++) { 392 echo '<a href="album2.php?page=' . $i . '">' . $i . '</a> '; 393 } 394 echo '</p>'; 395} else { 396 echo '<p class="textstyle">画像はまだありません。</p>'; 397} 398?> 399<tr><td bgcolor="mistyrose" align="center"> 400<font color="deeppink"><font size="1"><sup>●</sup><sub>●</sub><sup>●</sup><sub>●</sub><sup>●</sup><sub>●</sub><sup>●</sup><sub>●</sub><sup>●</sup></font> 401</td></tr> 402</table> 403</body> 404</html>
回答1件
0
画像要素に対してcssを適用すると良いでしょう。
CSS
1img { 2 vertical-align:middle; 3}
参考：【CSS】画像とテキストを中央で揃える方法【vertical-align】
ただ、これだと全ての画像に適用されてしまうので、tableかtdかimgに適当なCSSクラスやidを適用しておき
下記のようにすることで「対象の画像だけ」に適用が可能です。
テーブルに適用 <table id="imagelist" ～～～> table#imagelist td img { vertical-align:middle; } またはimgに適用 <img src="./album/' . $img . '" class="album_image"> img.album_image { vertical-align:middle; }
投稿2017/06/16 02:48
総合スコア80850
あなたの回答
tips
プレビュー
