垂直IMG中心

问题描述 投票:-1回答:1

我想将img垂直居中。是的,关于stackoverflow的这个问题有很多问题,但是它们并没有帮助我。图像是logo.svg,css文件中名为logo-img2的类为空。

HTML和自举程序4:

<!doctype html>
<html <?php language_attributes(); ?> class="no-js">
    <head>
        <meta charset="<?php bloginfo('charset'); ?>">
        <title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>

        <link href="//www.google-analytics.com" rel="dns-prefetch">
        <link href="<?php echo get_template_directory_uri(); ?>/img/icons/favicon.ico" rel="shortcut icon">
        <link href="<?php echo get_template_directory_uri(); ?>/img/icons/touch.png" rel="apple-touch-icon-precomposed">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="<?php bloginfo('description'); ?>">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

Wordpress代码:

        <?php wp_head(); ?>
        <script>
        // conditionizr.com
        // configure environment tests
        conditionizr.config({
            assets: '<?php echo get_template_directory_uri(); ?>',
            tests: {}
        });
        </script>

    </head>
    <body <?php body_class(); ?>>

        <!-- wrapper -->
        <div class="wrapper">

            <!-- header -->
            <header class="header clear sticky-top" role="banner">

                    <!-- logo -->
                    <div class="logo">

这是svg呼叫者代码:

                        <!-- nav -->

                        <span class="nav" role="navigation" ">

                            <a href="<?php echo home_url(); ?>">
                            <!-- svg logo - toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script -->
                            <img  src="<?php echo get_template_directory_uri(); ?>/img/logo.svg" alt="Logo" class="logo-img2" style="max-height: 30px; ">

                        </a>




                           <span style="float: left"><?php html5blank_nav(); ?></span>  </span>
                        <!-- <span class="nav" role="navigation" style="float:right"> <?php //html5blank_nav2(); ?> </span>
                        <!-- /nav -->





                    </div>

                    <!-- /logo -->



            </header>
            <!-- /header -->

怎么办?

css image centering
1个回答
0
投票

首先,您应该知道标题元素的大小,然后添加样式,其中x-标题的高度,y-img的高度:

.logo-img2 {
    margin: calc((x - y) / 2) 0;
}
© www.soinside.com 2019 - 2024. All rights reserved.