使用CSS进行图像对齐

Question

我有一个HTML输入用于搜索MySQL表上的项目.我必须说我是CSS新手.这是HTMP部分:

<div id="main">


        <div class="icon"></div>
        <h1 class="title">Especialidad Médica</h1>
        <h5 class="title">(selecciona la especialidad médica del doctor)</h5>

        <!-- Main Input -->
        <input type="text" id="search" autocomplete="off">

        <!-- Show Results -->
        <h4 id="results-text">Mostrando resultados para: <b id="search-string">Array</b></h4>
        <ul id="results"></ul>


    </div>

这是CSS部分:

/******************************************************************
Main CSS
******************************************************************/
div#main {
    width: 360px;
    margin: 200px auto 20px auto;
}
.title {
    line-height: 1.2em;
    position: relative;
    margin-left: 40px;
}
div.icon {
    margin-top: 4px;
    float: left;
    width: 31px;
    height: 30px;
    background-image: url(../images/magnify.gif);
    background-repeat: no-repeat;
    -webkit-transition-property: background-position, color;
    -webkit-transition-duration: .2s, .1s;
    -webkit-transition-timing-function: linear, linear;
    -moz-transition-property: background-position, color;
    -moz-transition-duration: .2s, .1s;
    -ms-transition-duration: .2s, .1s;
    -ms-transition-timing-property: linear, linear;
    -o-transition-property: background-position, color;
    -o-transition-duration: .2s, .1s;
    -o-transition-timing-property: linear, linear;
    transition-property: background-position, color;
    transition-duration: .2s, .1s;
    transition-timing-property: linear, linear;
}
div.icon:hover {
    background-position: 0px -30px;
    cursor: pointer;
}
input#search {
    width: 350px;
    height: 25px;
    padding: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    outline: none;
    border: 1px solid #ababab;
    font-size: 20px;
    line-height: 25px;
    color: #ababab;
}
input#search:hover, input#search:focus {
    color: #3b3b3b;
    border: 1px solid #36a2d2;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
h4#results-text {
    display: none;
}
ul#results {
    display: none;
    width: 360px;
    margin-top: 4px;
    border: 1px solid #ababab;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: rgba(0, 0, 0, .15) 0 1px 3px;
    -moz-box-shadow: rgba(0,0,0,.15) 0 1px 3px;
    box-shadow: rgba(0, 0, 0, .15) 0 1px 3px;
}
ul#results li {
    padding: 8px;
    cursor: pointer;
    border-top: 1px solid #cdcdcd;
    transition: background-color .3s ease-in-out;
    -moz-transition: background-color .3s ease-in-out;
    -webkit-transition: background-color .3s ease-in-out;
}
ul#results li:hover {
    background-color: #F7F7F7;
}
ul#results li:first-child {
    border-top: none;
}
ul#results li h3, ul#results li h4 {
    transition: color .3s ease-in-out;
    -moz-transition: color .3s ease-in-out;
    -webkit-transition: color .3s ease-in-out;
    color: #616161;
    line-height: 1.2em;
}
ul#results li:hover h3, ul#results li:hover h4  {
    color: #3b3b3b;
    font-weight: bold;
}

我正在使用AJAX从PHP文件中获取结果.

这是PHP部分:

// Define Output HTML Formating
$html = '';

$html .= '<li class="result">';
$html .= '<img src="iconos_especialidades/logo"  width="94" height="94"  />';
$html .= '<a target="_blank" href="urlString">';
$html .= '<h3>nameString</h3>';
$html .= '</a>';
$html .= '</li>';

// Get Search
$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
$search_string = $tutorial_db->real_escape_string($search_string);

// Check Length More Than One Character
if (strlen($search_string) >= 1 && $search_string !== ' ') {
    // Build Query
    $query = 'SELECT * FROM tb_especialidades WHERE especialidad LIKE "%'.$search_string.'%" OR especialidad LIKE "%'.$search_string.'%"';

    // Do Search
    $result = $tutorial_db->query($query);
    while($results = $result->fetch_array()) {
        $result_array[] = $results;
    }

    // Check If We Have Results
    if (isset($result_array)) {
        foreach ($result_array as $result) {

            // Format Output Strings And Hightlight Matches
            $display_function = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['especialidad']);
            $display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['especialidad']);
            $display_url = 'opinar_doc_local.php';

            if ($result['icono'] == ""){
            $display_logo = "nada.jpg";
            }
            else {
            $display_logo = $result['icono'] ;
            }

            // Insert Name
            $output = str_replace('nameString', $display_name, $html);



            // Insert URL
            $output = str_replace('urlString', $display_url, $output);
            // Insert LOGO
            $output = str_replace('logo', $display_logo, $output);

            // Output
            echo($output);
        }
    }else{

        // Format No Results Output
        $output = str_replace('urlString', 'javascript:void(0);', $html);
        $output = str_replace('nameString', '<b>No se ha encontrado la especialidad buscada.</b>', $output);
        $output = str_replace('functionString', 'Sorry :(', $output);

        // Output
        echo($output);
    }
}

我的问题是我想要在div的左侧获得图像,在图像的右侧看到文本,文本应该垂直对齐到图像的中间.

那是当前的输出:

我尝试将其添加到CSS文件中:

img {
    vertical-align: middle;
}

但输出是一样的.

Answer 1

试试这个,如果同时添加display-inline-block; and vertical-align: middle; 两个图像,<h3> 然后两个图像,<h3>并将在彼此的中间,但记住一件事,你需要在两者上添加宽度,使这项工作.

ul#results li img{display: inline-block; vertical-align:middle;}
ul#results li h3{display: inline-block; vertical-align:middle;}

<ul id="results">
  <li>
    <img src="http://www.redsignal.net/staging/wp-content/uploads/2015/12/6_ui_ux_design_hov.png"/>
    <h3>  your txt her </h3>
      </li>
  </ul>