[英]How to align these elements to the center?
I have this page: 我有这个页面:
http://paul.dac-proiect.ro/ http://paul.dac-proiect.ro/
I put a picture below to better understand what I want to do. 我在下面放一张照片,以更好地了解我想做什么。
I want to arrange buttons and text to the center, as in the picture above 我想将按钮和文本排列到中间,如上图所示
This is code HTML: 这是代码HTML:
<div class="text">
<div class="left" style="float:left;display:inline-block;">
<div class="inline">
<img class="slideshow-prev" src="/wp-content/themes/wpbootstrap/images/butoane-1.png" alt="photo3">
</div>
<div class="inline">
<img class="slideshow-next" src="/wp-content/themes/wpbootstrap/images/butoane-4.png" alt="photo3">
</div>
<p style="display: block;"></p>
</div>
<div class="text2">
<p style="display:block;">TEXT PENTRU PRIMA IMAGINE</p>
<p>TEXT PENTRU A DOUA IMAGINE</p>
<p>TEXT PENTRU A TREIA IMAGINE</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p></p>
</div>
<p></p>
</div>
I want this line to be responsive, I do not want to use fixed widths. 我希望这条线反应灵敏,我不想使用固定宽度。
I tried following to align center but do not think it is fair. 我尝试了以下方法以使中心对齐,但认为这不公平。
.text {
width:300px; //Here is a fixed width and I do not want so
margin:0 auto;
}
After we made this change, the elements look like. 进行更改后,元素看起来像。
Can you help me to solve this problem? 您能帮我解决这个问题吗?
Thanks in advance! 提前致谢!
Try this solution: 试试这个解决方案:
.text {
text-align: center;
background-color: white;
}
.left {
//remove float:left;
display: inline-block;
}
.text2 {
vertical-align: top;
display: inline-block;
}
.contact {
text-align: center;
}
If you don't want the contact information to be aligned center just remove the last selector. 如果您不希望联系信息居中对齐,只需删除最后一个选择器即可。
I created a different solution all together for you. 我为您共同创建了一个不同的解决方案。 I'm a front-end designer and I took a different approach to your idea. 我是前端设计师,对您的想法采取了不同的方法。 I think it looks cleaner on the site, and it's also 100% responsive. 我认为它在网站上看起来更干净,而且响应速度为100%。
To achieve this, simply use this CSS to replace the existing CSS under these classes. 为此,只需使用此CSS替换这些类下的现有CSS。 I want to make a note that your HTML mark-up is extreme spaghetti. 我想说明一下,您的HTML标记是极好的意大利面。 Also, don't use floats with inline-block, that makes no sense. 另外,不要将浮点数与inline-block一起使用,这没有任何意义。 Use inline-block for everything, and use float only when you need to float things to the right hand side (such as a navigation bar), or of course it's original intended purpose. 对所有内容都使用内联块,仅在需要将内容浮动到右侧(例如导航栏)时使用浮动,或者这当然是其原始预期用途。
.text {
display: block;
width: 100%;
float: none;
text-align: center;
background-color: #fff;
padding: 10px 0 4px;
border-bottom: 1px solid #F0F0F0;
}
.inline{
display: inline-block;
cursor: pointer;
}
.contact {
padding-top: 24px;
}
On this line of HTML below, remove the inline CSS float
and display:inline-block
. 在下面的这一行HTML上, 删除内联CSS float
和display:inline-block
。
<div class="left" style="float:left;display:inline-block;">
.text2 { text-align:center; .text2 {text-align:center; } .text2 p { text-align:center; } .text2 p {text-align:center; } }
Description part of slider needs to be in center and it is in "text2" class. 滑块的描述部分需要居中,并且在“ text2”类中。 so we are aligning i in center. 所以我们将i对准中心。
I hope this will work for you. 希望这对您有用。
I have modified your HTML a bit, removed inline style from an element having class left
我对您的HTML做了一些修改,从left
类中删除了内联样式
HTML HTML
<div class="text">
<div class="left">
<div class="inline">
<img class="slideshow-prev" src="/wp-content/themes/wpbootstrap/images/butoane-1.png" alt="photo3">
</div>
<div class="inline">
<img class="slideshow-next" src="/wp-content/themes/wpbootstrap/images/butoane-4.png" alt="photo3">
</div>
<p style="display: block;"></p>
</div>
<div class="text2">
<p style="display:block;">TEXT PENTRU PRIMA IMAGINE</p>
<p>TEXT PENTRU A DOUA IMAGINE</p>
<p>TEXT PENTRU A TREIA IMAGINE</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p></p>
</div>
<p></p>
</div>
CSS CSS
.text {
text-align:center;
}
.text div {
display: inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.