使用 MaterializeCSS 将图像居中的问题
问题描述 投票：0回答：1
我正在制作一个网站作为学校项目，我添加了一张我无法居中的图像。我已经尝试了 10 多种居中方法，但没有任何效果。它只是停留在屏幕的左侧。我正在使用 Materialise CSS。所有的 HTML 和 CSS 都在下面。附言如何将相同的图片添加到导航栏以使其适合？我尝试了几种方法，但没有用。
nav {
background-color: #271675 !important;
}
.naw-wrapper {
position: sticky;
z-index: 1;
}
.buttons {
margin-top: 15vh;
opacity: 0;
transition: .5s ease-in-out;
}
.title {
color: #543cc0 !important;
font-size: 40px;
font-weight: 500;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-top: 2vh;
}
p {
color: #646464;
}
.text {
font-size: 25px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.btn {
font-size: 25px !important;
margin: 5px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
border-radius: 7px;
}
.buildGuide {
margin-top: 20vh;
}
.buttons .text {
margin: 3vh;
margin-left: 10vw;
margin-right: 10vw;
}
img {
display: block;
margin: 0 !important;
padding: 0 !important;
}
.modal-content .title {
margin: 0;
}
.buttons .title {
font-family: 'Courier Prime', monospace;
}
.components {
margin-bottom: 15vh;
}
.left-arrow,
.right-arrow {
border-radius: 100%;
color: white;
background-color: #543cc0;
padding: 0;
margin: 5vh;
}
.left-arrow {
float: right;
}
.right-arrow {
float: left;
}
.carousel {
margin-bottom: 0;
padding-bottom: 0;
margin-top: 0;
padding-top: 0;
height: 30vh;
}<!DOCTYPE html>
<html lang="en">
<head>
<!--CSS and meta tags-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PC Configurator | Home</title>
</head>
<body>
<!--Navbar-->
<nav>
<div class="nav-wrapper">
<a class="brand-logo">PCC</a>
</div>
</nav>
<!--Top text and buttons-->
<div class="row buttons" id="topText">
<div class="col s12 m12 l12 center-align">
<img class="responsive-img" src="C:\Users\Jakov\Desktop\edit\zadnjiProjekt\resources\logo.png">
<p class="text flow-text">PC Configurator is a webiste designed to make PC building easy and accessible to
everyone.
We have a selection of PC building guides and tools at your disposal. The best part - it's totally
free!</p>
<a href="#" class="btn deep-purple darken-4 waves-effect flow-text">Build a PC<i
class="material-icons right flow-text">build</i></a>
<p class="text">OR</p>
<a href="#" class="btn deep-purple darken-4 waves-effect flow-text">Auto Builder<i
class="material-icons right flow-text">edit</i></a>
</div>
</div>
<!--Building guide-->
<div class="buildGuide row">
<div class="col s12 m12 l12 center-align">
<p class="title flow-text">Choosing the right components</p>
<p class="text flow-text">Choosing the right components for your brand new PC can be hard, especially if you
know nothing about PCs. In this guide, we will show you all you need to know about PC components. Simply
click on one of the components to learn about it.</p>
</div>
</div>
<!--Carousel-->
<div class="carousel components center-align">
<div class="carousel-item col s12 m6 l3 center-align">
<a class="waves-effect waves-light modal-trigger title flow-text" href="#cpuModal">
<img src="C:\Users\Jakov\Desktop\edit\zadnjiProjekt\resources\cpu.png" class="responsive-img">
</a>
</div>
<div class="carousel-item col s12 m12 l3 center-align">
<a class="waves-effect waves-light modal-trigger title flow-text" href="#gpuModal">
<img src="C:\Users\Jakov\Desktop\edit\zadnjiProjekt\resources\gpu.png" class="responsive-img">
</a>
</div>
<div class="carousel-item col s12 m12 l3 center-align">
<a class="waves-effect waves-light modal-trigger title flow-text" href="#mbModal">
<img src="C:\Users\Jakov\Desktop\edit\zadnjiProjekt\resources\mb.png" class="responsive-img">
</a>
</div>
<div class="carousel-item col s12 m12 l3 center-align">
<a class="waves-effect waves-light modal-trigger title flow-text" href="#ramModal">
<img src="C:\Users\Jakov\Desktop\edit\zadnjiProjekt\resources\ram.png" class="responsive-img">
</a>
</div>
<div class="carousel-item col s12 m12 l3 center-align">
<a class="waves-effect waves-light modal-trigger title flow-text" href="#storageModal">
<img src="C:\Users\Jakov\Desktop\edit\zadnjiProjekt\resources\storage.png" class="responsive-img">
</a>
</div>
<div class="carousel-item col s12 m12 l3 center-align">
<a class="waves-effect waves-light modal-trigger title flow-text" href="#psuModal">
<img src="C:\Users\Jakov\Desktop\edit\zadnjiProjekt\resources\psu.png" class="responsive-img">
</a>
</div>
<div class="carousel-item col s12 m12 l3 center-align">
<a class="waves-effect waves-light modal-trigger title flow-text" href="#caseModal">
<img src="C:\Users\Jakov\Desktop\edit\zadnjiProjekt\resources\case.png" class="responsive-img">
</a>
</div>
<div class="carousel-item cl s12 m12 l3 center-align">
<a class="waves-effect waves-light modal-trigger title flow-text" href="#coolingModal">
<img src="C:\Users\Jakov\Desktop\edit\zadnjiProjekt\resources\cooling.png" class="responsive-img">
</a>
</div>
</div>
<div class="row center-align">
<div class="col s6 m6 l6">
<i class="small material-icons flow-text center-align left-arrow" id="prev">keyboard_arrow_left</i>
</div>
<div class="col s6 m6 l6">
<i class="small material-icons flow-text center-align right-arrow" id="next">keyboard_arrow_right</i>
</div>
</div>
<!--Modals-->
<div>
<!--CPU-->
<div id="cpuModal" class="modal">
<div class="modal-content">
<p class="title flow-text">Processor</p>
<p class="text flow-text">The processor, also know as the <b>CPU</b>, is the brain of your computer.
It does
all of the calculations and operations you throw at it. There are only two processor brands.
<b>Intel</b> and <b>AMD</b>. While both of them make good processors, Intel is better for
gaming, while
AMD is better for workstations. You should spend between 20% and 30% of your budget on your
processor.
</p>
</div>
</div>
<!--GPU-->
<div id="gpuModal" class="modal">
<div class="modal-content">
<p class="title flow-text">Graphics card</p>
<p class="text flow-text">The graphics card, also known as the <b>GPU</b>, is probably the most
important
component if you are want a gaming or workstation based PC. There are two graphics card chip
makers:
<b>Nvidia</b> and <b>AMD</b>. There are also a lot of 3rd party brands that use those chips and
just
make the rest of the graphics card. Those are the ones you will most likely find, as the
so-called
<b>"founder's edition"</b> graphics cards(that are entirely 1st party) are very rare. You should
spend
around 40% of your budget on your graphics card. Some processors have intergrated graphics, and
don't
need dedicated graphics cards. Those processors have a <b>G</b> at the end of their name(AMD) or
don't
have <b>K</b>, <b>X</b> or <b>F</b> at the end of their name(Intel).</p>
</div>
</div>
<!--Motherboard-->
<div id="mbModal" class="modal">
<div class="modal-content">
<p class="title flow-text">Motherboard</p>
<p class="text flow-text">The motherboard makes all of your components communicate. Every component
is
plugged into it. They all differ mainly by their <b>chipset</b> and <b>socket</b>. Depending on
which
CPU you have, you will need a different socket(<b>AM</b> for AMD and <b>LGA</b> for Intel). It
is
recommended that you spend less than your CPU on your motherboard. For most users, the
motherboard
features don't even matter.</p>
</div>
</div>
<!--RAM-->
<div id="ramModal" class="modal">
<div class="modal-content">
<p class="title flow-text">Memory</p>
<p class="text flow-text">Memory, also known as <b>RAM</b> is where all of your running apps are
stored.
Once you power off the computer, the memory get wiped clean. There are multiple aspects too look
for
when choosing memory.<br>
<b>Memory speed</b> measures how often your memory communicates with your CPU(measured in MHz).
AMD
CPUs benefit much more from higher memory speed. It is recommended to have a memory speed of
3000MHz or
higher for AMD CPUs.<br>
The <b>latency</b> or <b>CAS timing</b> is how much cycles it takes for your RAM to send data
requested
by the CPU. Generally, everything below <b>CL-20</b> is considered OK, and everything below
<b>CL-17</b>
is considered fast.<br>
The <b>number of memory sticks</b> affects your performance the most. It simply tells you how
many
sticks of RAM you are getting in the package. One is Ok for simple tasks, but having two or more
significantly increases performance, as long as you install them in <b>dual-channel mode</b>.
The
possible amount of ram sticks can be 1, 2, 4, 8, 16 and even 32. Most computers use 1-4 RAM
sticks since
that is what most motherboards support.<br>
The <b>capacity</b> of your RAM simply tells you how much <b>GB</b> of RAM you are getting. 4GB
is
enough for very slight tasks, 8GB is enough for some gaming or every-day tasks, 16GB is OK for
most
games and workstation applications while 32GB+ is only used in expensive beastly computers that
can
handle everything you throw at them.
</p>
</div>
</div>
<!--Storage-->
<div id="storageModal" class="modal">
<div class="modal-content">
<p class="title flow-text">Storage</p>
<p class="text flow-text">The storage does what the name says - it stores all of your data, even
when
your
PC is off. There are 3
types of storage: <b>SSD</b>, <b>HDD</b> and <b>hybrid</b> drives. SSDs are the fastes of them
all
by a
lot. They don't have as much storage as the other parts and cost more. HDDs are the slowest but
they
have the most storage and cost the least. Hybrid drives or SSHDs are a hybrid of the two. They
are
faster than HDDs but slower than SSDs but have more storage than SSDs. Their cost is somewhere
inbewteen
the two. There are mulpitle for factor: <b>3.5"</b>(HDDs and SSHDs), <b>2.5"</b>(SSDs),
<b>M.2</b>(SSDs), and <b>PCIe</b>(SSDs).</p>
</div>
</div>
<!--PSU-->
<div id="psuModal" class="modal">
<div class="modal-content">
<p class="title flow-text">Power supply</p>
<p class="text flow-text">The power supply, or the <b>PSU</b> is responsible for powering your
system.
<b>Modular</b> PSUs have all the cables seperate, so you can only plug in the ones you need.
<b>Non-modular</b> PSUs have all the cables attached. It is important not to cheap out on your
PSU
and
only buy from trusted brands. Those brands are: <b>Corsair</b>, <b>Coolermaster</b>,
<b>Asus</b>,
<b>Gigabyte</b>, <b>Silverstone</b>, <b>be quiet!</b>, <b>Phanteks</b>, <b>Thermaltake</b>,
<b>Seasonic</b> and <b>Fractal Design</b>. You should always get a PSU with more wattage than
you
need.
For example, if your system uses 400W you should get a 550W PSU. Better PSUs also have power
ratings.
These tell you how good their power efficiency is. They start with <b>80+</b> and go all the way
up
to
<b>80+ Platinum</b>.</p>
</div>
</div>
<!--Case-->
<div id="caseModal" class="modal">
<div class="modal-content">
<p class="title flow-text">Case</p>
<p class="text flow-text">The case houses all of your components. The only performance factor of
cases is their airloflow. Some come with preinstalled fans, more intake space and much more. The
case is often the cheapest part of any PC.</p>
</div>
</div>
<!--Cooling-->
<div id="coolingModal" class="modal">
<div class="modal-content">
<p class="title flow-text">Cooling</p>
<p class="text flow-text">Most of your components need cooling. Some of them, like the CPU, GPU and
PSU usually come with one or more fans. But sometimes that is not enough, especially for more
powerful hardware. There are 3 types of coolers. <br><b>CPU coolers</b> cool the CPU. They can
be water coolers or air coolers.<br><b>GPU coolers</b> cool the GPU. Most GPUs come with
excelent air-cooling but you can step it up further with a custom water cooler.<br><b>Case
coolers</b> or <b>case fans</b> are as they sound - fans that are mounted inside the case
and help with the intake of cold air and with the exhaust of hot air.</p>
</div>
</div>
</div>
<!--Scripts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="main.js"></script>
</html>
1个回答
0
投票
投票
首先，您应该添加徽标 img 标签，然后将导航栏显示为 flex。之后你可以使用 justify-content:center; .不要忘记在您的 css 样式中调整徽标尺寸
例子
nav {
background-color: #271675 !important;
justify-content: center;
display: flex;
}html代码
<!--Navbar-->
<nav>
<div class="nav-wrapper">
<img class="pcclogo"src="https://i.ibb.co/mb1Mjqy/logo.png">
</div>
</nav>最新问题
- 我应该使用个人访问令牌从 GitHub Actions 访问 ghcr 吗？
- 如何查看 ActiveResource 请求的 HTTP 响应 [已关闭]
- Spring：java.sql.SQLException：字段“**”没有默认值
- mysql cte递归获取所有兄弟姐妹
- 如何在Java中删除二维数组中的项目？
- 无法返回在函数中实现特征的结构
- 每次从vscode图标打开vscode时，默认打开的是C文件
- 使用 laravel 和 nuxt js 的多租户显示公司徽标时出现问题
- 如何在闪屏动画后制作淡入淡出动画
- 如何在箱线图中做边框？
- 统计用户每个日期的所有访问量
- 无法返回在函数中实现特征的结构（Mojolang）
- 如何在 Laravel 中安装 Chart.js？
- 狗产前维生素
- 通过 Amazon Cognito 使用刷新令牌轮换和重用检测的更好方法
- 如何在 html css js 中多次折叠行
- 如何使用azure中的专用端点从pgadmin连接到postgreSQL服务器？
- Jetpack Compose 导航库问题 - 条件导航
- Kotlin 检查 Collection 是否既不为 null 也不为空
- Karate NPM - 如何将值从 karate-config.js 文件传递到功能文件
© www.soinside.com 2019 - 2024. All rights reserved.