具有锚链接的垂直居中svg图像
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了具有锚链接的垂直居中svg图像相关的知识，希望对你有一定的参考价值。
我为基于flex的垂直中心导航设计和标记！我以为不知何故左侧标志和右侧按钮不在中心位置。我可以做中心吗？
.nav-area {
font-family: "Roboto", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 75px;
position: relative;
z-index: 1030;
padding: 0 30px
}
.nav-area .logo a svg {
width: auto;
height: 40px;
fill: #ffffff;
}
.center-nav {
margin-right: auto;
margin-left: auto;
}
.center-nav a {
transition: 0.4s;
color: #ffffff;
text-decoration: none;
padding: 16px 10px;
font-size: 16px;
font-family: "Roboto", sans-serif;
}
.center-nav a:hover {
text-decoration: none;
color: gray;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.center-nav a:not(:last-child) {
margin-right: 5em;
}
.right-nav{
display:flex;
align-items:center;
}
.right-nav .btn-submit {
font-family: "Roboto", sans-serif;
background: #ffffff;
padding: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 1px;
color: #787878;
text-decoration: none;
}
.right-nav .btn-submit:hover {
color: #616161;
}
.right-nav svg {
width: 20px;
height: auto;
fill: #ffffff;
}
.right-nav a {
color: #ffffff;
text-decoration: none;
font-size: 16px;
font-family: "Roboto", sans-serif;
}
.right-nav a:hover {
text-decoration: none;
color: #ffffff;
}
.right-nav a:not(.btn-submit) {
margin-right: 2em;
}<div class="nav-area px-md-4" style="background: #a111fb;">
<div class="logo mr-md-5">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236.387 53.781">
<defs>
<style></style>
</defs>
<g id="Group_426" data-name="Group 426" transform="translate(-41 -42)">
<g id="Group_23" data-name="Group 23" transform="translate(228.43 77.842)">
<path id="Path_15" data-name="Path 15" class="cls-1" d="M524.5,122.6h3.395v3.323H524.5Z"
transform="translate(-524.5 -114.631)"/>
<path id="Path_16" data-name="Path 16" class="cls-1"
d="M550.342,107.447a5.817,5.817,0,0,1-5.718,4.5,5.758,5.758,0,0,1-5.825-5.825,5.7,5.7,0,0,1,5.753-5.825,5.778,5.778,0,0,1,5.789,4.574h-3.323a2.431,2.431,0,0,0-2.359-1.5,2.6,2.6,0,0,0-2.573,2.787,2.555,2.555,0,0,0,2.573,2.716,2.609,2.609,0,0,0,2.394-1.465h3.288Z"
transform="translate(-533.69 -100.3)"/>
<path id="Path_17" data-name="Path 17" class="cls-1"
d="M575.515,101.944A5.825,5.825,0,0,1,579.7,100.3a5.571,5.571,0,0,1,4.574,2.073,6.006,6.006,0,0,1,1.322,3.752,6.133,6.133,0,0,1-1.715,4.217,5.765,5.765,0,0,1-4.217,1.644,5.669,5.669,0,0,1-5.861-5.861A6.047,6.047,0,0,1,575.515,101.944Zm4.181,6.968a2.645,2.645,0,0,0,2.609-2.787,2.7,2.7,0,0,0-2.609-2.752,2.774,2.774,0,0,0,0,5.539Z"
transform="translate(-556.183 -100.3)"/>
<path id="Path_18" data-name="Path 18" class="cls-1"
d="M611.636,100.757h3.073V101.9a3.281,3.281,0,0,1,3-1.5,3.421,3.421,0,0,1,3.18,1.965,3.857,3.857,0,0,1,3.431-1.965,3.912,3.912,0,0,1,2.823,1.072c.965.929,1.179,1.751,1.179,4.252v5.932h-3.288v-5.789a2.9,2.9,0,0,0-.357-1.858,1.547,1.547,0,0,0-1.251-.572,1.839,1.839,0,0,0-1.286.536,2.342,2.342,0,0,0-.464,1.751v5.932H618.39v-5.932c0-1.5-.572-2.287-1.68-2.287-1.179,0-1.823.786-1.823,2.287v5.932H611.6v-10.9Z"
transform="translate(-580.475 -100.364)"/>
</g>
<g id="Group_24" data-name="Group 24" transform="translate(-34 -21)">
<g id="Group_17" data-name="Group 17" transform="translate(207.219 63)">
<path id="Path_6" data-name="Path 6" class="cls-1" d="M370,0h5.968V26.408H370Z"
transform="translate(-370)"/>
<path id="Path_7" data-name="Path 7" class="cls-1"
d="M412.088,34.839c-.929,1.894-2.966,2.787-6.146,2.787-5.968,0-10.042-4.324-10.042-10.613,0-6.218,4.217-10.613,10.22-10.613,3,0,4.9.893,6,2.787V17.115h5.61V36.948h-5.61V34.839ZM406.8,32.088a4.844,4.844,0,0,0,4.967-5.039,4.967,4.967,0,1,0-9.934-.036A4.894,4.894,0,0,0,406.8,32.088Z"
transform="translate(-386.645 -10.539)"/>
<path id="Path_8" data-name="Path 8" class="cls-1"
d="M473.254,38.87a3.468,3.468,0,0,0,3.5,1.965,4.833,4.833,0,0,0,3.859-1.822,5.358,5.358,0,0,0,.929-3.538v-.643c-.822,1.608-3.395,2.823-5.968,2.823-5.325,0-9.577-4.646-9.577-10.435,0-6.146,4.288-10.72,10.113-10.72a6.992,6.992,0,0,1,5.825,2.537V17.179h5.61V34.618c0,4.074-.214,5.11-1.251,6.718-1.894,2.787-5.718,4.538-10.006,4.538-5.36,0-9.291-2.787-9.863-6.968h6.825Zm3.5-6.718a4.711,4.711,0,0,0,4.86-4.931,4.771,4.771,0,0,0-4.824-5.11,4.851,4.851,0,0,0-4.824,4.931A4.868,4.868,0,0,0,476.756,32.152Z"
transform="translate(-431.694 -10.604)"/>
<path id="Path_9" data-name="Path 9" class="cls-1"
d="M537.4,0h5.968V8.148A7.456,7.456,0,0,1,549.085,5.9a10.118,10.118,0,0,1,6.861,2.787,10.457,10.457,0,0,1,2.93,7.647c0,6.325-4.145,10.72-10.006,10.72-2.394,0-3.681-.607-5.825-2.787v2.144h-5.61V0Zm10.578,21.548a4.943,4.943,0,0,0,4.931-5.039,4.914,4.914,0,1,0-9.827-.036A4.858,4.858,0,0,0,547.978,21.548Z"
transform="translate(-477.58)"/>
<path id="Path_10" data-name="Path 10" class="cls-1"
d="M623.547,30.83c-1.858,4.288-5.432,6.861-9.684,6.861A10.433,10.433,0,0,1,603.5,27.149,10.421,10.421,0,0,1,613.792,16.5c5.968,0,10.435,4.646,10.435,10.828a7.693,7.693,0,0,1-.143,1.608h-14.83a4.166,4.166,0,0,0,4.324,3.716,4.543,4.543,0,0,0,3.645-1.572l.286-.286h6.039ZM618.294,25a4.374,4.374,0,0,0-4.5-3.431A4.307,4.307,0,0,0,609.325,25Z"
transform="translate(-520.059 -10.604)"/>
</g>
<g id="Group_18" data-name="Group 18" transform="translate(98.156 63)">
<path id="Path_11" data-name="Path 11" class="cls-1"
d="M64.8,1.5h6.754V21.976H79.38v5.968H64.8Z" transform="translate(-64.8 -0.964)"/>
<path id="Path_12" data-name="Path 12" class="cls-1"
d="M122.237,0A13.742,13.742,0,1,1,108.3,13.544,13.73,13.73,0,0,1,122.237,0Zm.143,21.548c3.967,0,7.111-3.395,7.111-7.719,0-4.431-3.145-7.862-7.218-7.862a7.347,7.347,0,0,0-7.218,7.647C115.054,18.153,118.163,21.548,122.38,21.548Z"
transform="translate(-92.755)"/>
<path id="Path_13" data-name="Path 13" class="cls-1"
d="M212.4,9.463a6.334,6.334,0,0,0-5.789-3.431,7.107,7.107,0,0,0-5.217,2.216,6.92,6.92,0,0,0-2,5.217,9.111,9.111,0,0,0,2.073,6,7.972,7.972,0,0,0,5.61,2.216c3,0,5.217-1.608,5.825-4.217h-7.862V12h15.688l.036,1.394c.25,8.04-6.111,14.151-14.115,14.151a13.778,13.778,0,0,1-9.756-23.764A15.116,15.116,0,0,1,206.751.1c6.075,0,11.65,3.967,13.186,9.363H212.4Z"
transform="translate(-146.931 -0.064)"/>
<path id="Path_14" data-name="Path 14" class="cls-1"
d="M291.737,0A13.742,13.742,0,1,1,277.8,13.544,13.73,13.73,0,0,1,291.737,0Zm.143,21.548c3.967,0,7.111-3.395,7.111-7.719,0-4.431-3.145-7.862-7.218-7.862a7.347,7.347,0,0,0-7.219,7.647C284.554,18.153,287.663,21.548,291.88,21.548Z"
transform="translate(-201.685)"/>
</g>
<path id="XMLID_1_" class="cls-1"
d="M17.01,41.96h0a5.532,5.532,0,0,1-5.432-5.217V.4H0V37.386H0c.572,9.291,7.969,16.652,17.01,16.652h6.146V41.924H17.01Z"
transform="translate(75 62.743)"/>
</g>
</g>
</svg>
</a>
</div>
<div class="center-nav">
<a href="">Logos</a>
<a href="">How It works</a>
<a href="">About</a>
<a href="">Contact</a>
</div>
<div class="right-nav">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 129 129">
<g>
<path d="M51.6,96.7c11,0,21-3.9,28.8-10.5l35,35c0.8,0.8,1.8,1.2,2.9,1.2s2.1-0.4,2.9-1.2c1.6-1.6,1.6-4.2,0-5.8l-35-35 c6.5-7.8,10.5-17.9,10.5-28.8c0-24.9-20.2-45.1-45.1-45.1C26.8,6.5,6.5,26.8,6.5,51.6C6.5,76.5,26.8,96.7,51.6,96.7z M51.6,14.7 c20.4,0,36.9,16.6,36.9,36.9C88.5,72,72,88.5,51.6,88.5c-20.4,0-36.9-16.6-36.9-36.9C14.7,31.3,31.3,14.7,51.6,14.7z"/>
</g>
</svg>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512">
<g>
<g>
<path d="M508.764,74.466c-2.803-3.503-7.046-5.542-11.533-5.542H104.152L93.16,21.294c-1.547-6.701-7.514-11.448-14.391-11.448 h-64C6.613,9.846,0,16.459,0,24.616s6.613,14.769,14.769,14.769H67.02l74.612,323.321c1.546,6.701,7.514,11.448,14.391,11.448 h295.915c8.157,0,14.769-6.613,14.769-14.769c0-8.157-6.613-14.769-14.769-14.769H167.773l-11.36-49.231h296.511 c6.908,0,12.893-4.788,14.409-11.527L511.64,86.935C512.625,82.557,511.567,77.97,508.764,74.466z M441.108,265.846H149.596 L110.969,98.462h367.8L441.108,265.846z"/>
</g>
</g>
<g>
<g>
<path d="M216.615,393.846c-29.86,0-54.154,24.293-54.154,54.154s24.293,54.154,54.154,54.154c29.86,0,54.154-24.293,54.154-54.154 S246.476,393.846,216.615,393.846z M216.615,472.616C203.042,472.616,192,461.573,192,448s11.042-24.615,24.615-24.615 c13.573,0,24.615,11.042,24.615,24.615S230.188,472.616,216.615,472.616z"/>
</g>
</g>
<g>
<g>
<path d="M393.846,393.846c-29.86,0-54.154,24.293-54.154,54.154s24.293,54.154,54.154,54.154c29.86,0,54.154-24.293,54.154-54.154 S423.707,393.846,393.846,393.846z M393.846,472.616c-13.573,0-24.615-11.042-24.615-24.615s11.042-24.615,24.615-24.615 c13.573,0,24.615,11.042,24.615,24.615S407.419,472.616,393.846,472.616z"/>
</g>
</g>
</svg>
</a>
<a href="">Login/ Sign Up</a>
<a onclick="logFunction()" class="btn-submit" href="javascript:void(0)">Submit logo</a>
<span class="m-nav" onclick="openNav()">
<img src="images/menu.svg" alt="">
</span>
</div>
</div>答案
你能添加这些样式吗？
.right-nav{
display: flex;
align-items: center;
}
以上是关于具有锚链接的垂直居中svg图像的主要内容，如果未能解决你的问题，请参考以下文章