html – CSS中心文本框[复制]

前端之家收集整理的这篇文章主要介绍了html – CSS中心文本框[复制]前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > How do I center a <div>? 4个
这是注册框:

http://technicaldebt.co.uk/fyp/register.php

我试图让框在网页中间居中. CSS附在下面.任何帮助将不胜感激.

  1. /*********************************************************************************/
  2. /* Basic */
  3. /*********************************************************************************/
  4.  
  5. *
  6. {
  7. -webkit-Box-sizing: border-Box;
  8. -moz-Box-sizing: border-Box;
  9. Box-sizing: border-Box;
  10. }
  11.  
  12. body
  13. {
  14. background: #1e1e1e url(images/bg04.jpg) repeat;
  15. font-family: 'Open Sans',sans-serif;
  16. font-size: 11pt;
  17. color: #7f7f7f;
  18. }
  19.  
  20. form
  21. {
  22. }
  23.  
  24. form input,form select,form textarea
  25. {
  26. -webkit-appearance: none;
  27. }
  28.  
  29. br.clear
  30. {
  31. clear: both;
  32. }
  33.  
  34. p,ul,ol,dl,table
  35. {
  36. margin-bottom: 1em;
  37. }
  38.  
  39. p
  40. {
  41. line-height: 1.7em;
  42. }
  43.  
  44. a
  45. {
  46. color: #779c5b;
  47. }
  48.  
  49. a:hover
  50. {
  51. text-decoration: none;
  52. }
  53.  
  54. section,article
  55. {
  56. margin-bottom: 3em;
  57. }
  58.  
  59. section > :last-child,article > :last-child
  60. {
  61. margin-bottom: 0;
  62. }
  63.  
  64. section:last-child,article:last-child
  65. {
  66. margin-bottom: 0;
  67. }
  68.  
  69. .image
  70. {
  71. display: inline-block;
  72. }
  73.  
  74. .image img
  75. {
  76. display: block;
  77. width: 100%;
  78. }
  79.  
  80. .image-full
  81. {
  82. display: block;
  83. width: 100%;
  84. }
  85.  
  86. .image-left
  87. {
  88. float: left;
  89. margin: 0 2em 0 1em;
  90. }
  91.  
  92. .image-border img
  93. {
  94. border-radius: 5px;
  95. }
  96.  
  97. ul.style1
  98. {
  99. }
  100.  
  101. ul.style1 li
  102. {
  103. padding: 0.80em 0 0.75em 0;
  104. border-top: 1px solid #e0e0e0;
  105. }
  106.  
  107. ul.style1 a
  108. {
  109. text-decoration: underline;
  110. color: #779c5b;
  111. }
  112.  
  113. ul.style1 a:hover
  114. {
  115. text-decoration: none;
  116. }
  117.  
  118. ul.style1 .image-left
  119. {
  120. margin-top: 0.50em;
  121. margin-right: 1.50em;
  122. margin-left: 0 !important;
  123. }
  124.  
  125. ul.style1 .date
  126. {
  127. display: block;
  128. margin: 0;
  129. padding: 1em 0 0 0;
  130. line-height: 0;
  131. color: #047ab7;
  132. }
  133.  
  134. ul.style1 .first
  135. {
  136. border-top: none;
  137. }
  138.  
  139. ul.style2
  140. {
  141. }
  142.  
  143. ul.style2 li
  144. {
  145. overflow: hidden;
  146. padding: 1.75em 0 1.75em 0;
  147. border-top: 1px solid #e0e0e0;
  148. }
  149.  
  150. ul.style2 p
  151. {
  152. margin: 0;
  153. }
  154.  
  155. ul.style2 h3 {
  156. padding: 0 0 0.50em 0;
  157. font-size: 1.00em;
  158. }
  159.  
  160. ul.style2 .image-left
  161. {
  162. margin-left: 0;
  163. }
  164.  
  165. ul.style2 .first
  166. {
  167. border-top: none;
  168. }
  169.  
  170. ol.style1
  171. {
  172. margin-left: 3em;
  173. }
  174.  
  175. ol.style1 li
  176. {
  177. padding: 0.35em 0;
  178. list-style: decimal;
  179. }
  180.  
  181. .button
  182. {
  183. display: inline-block;
  184. margin-top: 1em;
  185. padding: 0.70em 1.5em;
  186. border-radius: 5px;
  187. background: #779c5b;
  188. line-height: 1;
  189. text-align: center;
  190. text-decoration: none;
  191. color: #FFFFFF;
  192. transition: background-color .25s ease-in-out;
  193. -moz-transition: background-color .25s ease-in-out;
  194. -webkit-transition: background-color .25s ease-in-out;
  195. }
  196.  
  197. .button:hover
  198. {
  199. background: #96b77c;
  200. }
  201.  
  202. .button-style1
  203. {
  204. background: #222222;
  205. }
  206.  
  207. .button-style1:hover
  208. {
  209. background: #2d2d2d;
  210. }
  211.  
  212. .button-style2
  213. {
  214. margin-top: 0.50em;
  215. padding: 1.75em 3.00em;
  216. Box-shadow: 5px 0 5px -5px rgba(0,0.4),0 6px 5px -5px rgba(0,-5px 0 5px -5px rgba(0,0.4);
  217. line-height: 0.25em;
  218. }
  219. .button-style2:hover
  220. {
  221. background: #96b77c;
  222. }
  223.  
  224. /* Assign these to ARTICLE tags */
  225.  
  226. .Box
  227. {
  228. padding: 2.50em 2.50em;
  229. background: #FFFFFF;
  230. border: 1px solid #e0e0e0;
  231. border-radius: 5px;
  232. }
  233.  
  234. .Box h2
  235. {
  236. padding: 0 0 0.40em 0;
  237. letter-spacing: -0.03em;
  238. font-size: 1.60em;
  239. color: #0f0f0f;
  240. }
  241.  
  242. .Box .subtitle
  243. {
  244. padding: 0 0 0.30em 0;
  245. font-size: 1.10em;
  246. color: #5f6b8b;
  247. }
  248.  
  249. .Box-post
  250. {
  251. }
  252.  
  253. .Box-featured-post
  254. {
  255. }
  256.  
  257. /* Assign these to SECTION tags */
  258.  
  259. .Box-news
  260. {
  261. }
  262.  
  263. .Box-tweets
  264. {
  265. }
  266.  
  267. .Box-contact
  268. {
  269. }
  270.  
  271. /*********************************************************************************/
  272. /* Wrappers */
  273. /*********************************************************************************/
  274.  
  275. #wrapper
  276. {
  277. overflow: hidden;
  278. background: url(images/bg01.jpg) repeat;
  279. }
  280.  
  281. #wrapper-gradient
  282. {
  283. }
  284.  
  285. #header-wrapper
  286. {
  287. overflow: hidden;
  288.  
  289. background: url(images/gradient.svg);
  290.  
  291. background: -moz-linear-gradient(
  292. center bottom,rgba(0,0) 5%,0.5) 100%
  293. );
  294.  
  295. background: -webkit-gradient(
  296. linear,left bottom,left top,color-stop(0.0,0.0)),color-stop(1.0,0.5))
  297. );
  298. }
  299.  
  300. #banner-wrapper
  301. {
  302. overflow: hidden;
  303. }
  304.  
  305. #feature-wrapper
  306. {
  307. overflow: hidden;
  308. padding: 3em 0em;
  309. background: #5f6b8b url(images/shadow02.png) no-repeat center top;
  310. Box-shadow: 0px 10px 5px rgba(0,.3),0px -1px 25px rgba(0,.3);
  311. color: #dfe2e8;
  312. }
  313.  
  314. #main-wrapper
  315. {
  316. overflow: hidden;
  317. padding: 3em 0em 4em 0em;
  318. background: #f3f3f3 url(images/bg03.jpg) repeat;
  319. Box-shadow: 0px 10px 5px rgba(0,.3);
  320. }
  321.  
  322. #footer-wrapper
  323. {
  324. }
  325.  
  326. #copyright-wrapper
  327. {
  328.  
  329. background: url(images/gradient.svg);
  330.  
  331. background:
  332. -moz-linear-gradient(
  333. center bottom,0.5) 70%
  334. );
  335.  
  336. background: -webkit-gradient(
  337. linear,color-stop(0.70,0.5))
  338. );
  339.  
  340. }
  341.  
  342.  
  343. /*********************************************************************************/
  344. /* Feature */
  345. /*********************************************************************************/
  346.  
  347. #feature-content
  348. {
  349. }
  350.  
  351. #feature-content h2
  352. {
  353. height: 3.50em;
  354. margin: 0 0 1em 0;
  355. padding: 0 0 0 3.50em;
  356. background: url(images/arrow01.png) no-repeat 0.75em 50%;
  357. border-bottom: 1px solid #949db3;
  358. letter-spacing: -0.02em;
  359. font-size: 1.50em;
  360. color: #FFFFFF;
  361. }
  362.  
  363. #feature-content span
  364. {
  365. display: inline-block;
  366. height: 3.50em;
  367. padding: 0 0 0 1em;
  368. border-left: 1px solid #949db3;
  369. line-height: 3.5em;
  370. }
  371.  
  372.  
  373. /*********************************************************************************/
  374. /* Banner */
  375. /*********************************************************************************/
  376.  
  377. #banner
  378. {
  379. overflow: hidden;
  380. }
  381.  
  382. #banner h2
  383. {
  384. display: inline-block;
  385. font-weight: 700;
  386. color: #FFFFFF;
  387. }
  388.  
  389. #banner .subtitle
  390. {
  391. font-weight: 300;
  392. color: #ababab;
  393. }
  394.  
  395. /*********************************************************************************/
  396. /* Content */
  397. /*********************************************************************************/
  398.  
  399. #content
  400. {
  401. }
  402.  
  403. #content article
  404. {
  405. }
  406.  
  407. #content .image-left
  408. {
  409. margin-left: 0;
  410. }
  411.  
  412. /*********************************************************************************/
  413. /* Sidebar */
  414. /*********************************************************************************/
  415.  
  416. #sidebar
  417. {
  418. }
  419.  
  420.  
  421. /*********************************************************************************/
  422. /* Two Column */
  423. /*********************************************************************************/
  424.  
  425.  
  426. #two-column
  427. {
  428. }
  429.  
  430. #two-column .tBox
  431. {
  432. }
  433.  
  434. #two-column .tBox .image-full
  435. {
  436. padding-bottom: 2em;
  437. }
  438.  
  439.  
  440. /*
  441. Registration/Login Form by html-form-guide.com
  442. You can customize all the aspects of the form in this style sheet
  443. */
  444.  
  445. #fg_membersite fieldset
  446. {
  447. width: 230px;
  448. padding:20px;
  449. border:1px solid #ccc;
  450. -moz-border-radius: 10px;
  451. -webkit-border-radius: 10px;
  452. -khtml-border-radius: 10px;
  453. border-radius: 10px;
  454. }

解决方法

以边距为中心的div:0 auto;喜欢建议div必须包含有效宽度.

如果你添加

  1. #register{
  2. //...
  3. width: 300px;
  4. margin: 0 auto;
  5. }

这将使div在中心水平居中.您还可以在父级中使用text-align:center,并在div格式中使用display:inline-block.如:

  1. #fg_membersite{
  2. text-align:center;
  3. }
  4.  
  5. #register{
  6. display:inline-block;
  7. }

如果你想在垂直中心,我建议你使用display:table(在aprent div上)和display:table-cell(在包装div中)和vertical-align:middle选项,或者可能是一个位置:absolute with负利润,这是你的选择.

干杯.

猜你在找的HTML相关文章