Css div border center

How to Add Border Inside a Div

Next, see an example, where we place a border and an outline inside a element.

Example of placing a border and an outline inside a element:

html> html> head> title>Title of the document title> style> .box < width: 180px; height: 180px; background: #d9dbda; margin: 20px 50px; > .inner-border < border: 20px solid #d9dbda; box-shadow: inset 0px 0px 0px 10px #969696; box-sizing: border-box; > .inner-outline < outline: 10px solid lightblue; outline-offset: -30px; > style> head> body> h2>Border inside a Div h2> div class="box inner-border"> div> h2>Outline Inside a Div h2> div class="box inner-outline"> div> body> html>

In the example above, we used the outline property instead of the border and then moved it inside the box using the outline-offset property (with a negative value).

Источник

CSS centered border

EDIT OP wants the text centered: To keep the text centered add to the parent: Solution 3: You can use display:inline-block; on the h3 instead of display:block; you can try this http://jsfiddle.net/kFaXp/14/ Solution 2: Add to the CSS for the element. http://jsfiddle.net/Kyle_Sevenoaks/kFaXp/9/ Solution 3: you can achive your desired results by defining http://tinkerbin.com/I2slDWGY Solution 1: Your last p need class and you should write text-align:center for your p not span i show you how to write this code in html and css: Solution 2: Because its span span is an inline element if u want to centre cover it with div. Solution 3: Solution 1:

CSS centered border

You could do that by reducing the width and centering your container ( div.form ) Something like

display:inline-block; margin: 0 auto; 

you can use CSS to put a border round whatever you want. for my example i will just surround the username and password fields with a solid black border:

 
Please enter your login details
 
Username: Password: 
 
 

The only change in the above HTML is i have put div’s around the username and password section so the css knows which html to border around.

i then write this simple css:

here a website with will show you what border styles there is out their.

Text align doesn’t center and middle itself when using a border-radius

Text-align centre only centre horizontally. you can try this

Add line-height: 50px; to the CSS for the element.

you can achive your desired results by defining line-height: 50px;

CSS Text Alignment and Text Direction, The text-align property is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified. The following example shows …

Text align center html/css

Your last p need class and you should write text-align:center for your p not span i show you how to write this code in html and css:

Because its span span is an inline element if u want to centre cover it with div.

Html — CSS centered border, You can resolve your issue by updating your CSS a little. Change these rules to the below CSS rules: div.form < text-align: center; >form < padding: 20px; …

How to center an HTML element with border that matches width

There are two main options I can think of:

1) set h3 to display: inline AND set the parent element to have text-align: center

You could add display: inline to your h3 selector:

This will of course affect the layout behavior.

EDIT OP wants the text centered:

To keep the text centered add text-align: center to the parent:

You can use display:inline-block; on the h3 instead of display:block;

Can I center a border with CSS?, I’m trying to center the dotted line horizontally with CSS. At the moment, it appears at the bottom. Is there a way I can offset it with -5px or something? At the …

Источник

CSS center a border with CSS

The following tutorial shows you how to use CSS to do «CSS center a border with CSS».

CSS Style

The CSS style to do «CSS center a border with CSS» is

.divider < background:aqua url("styles/images/divider-stars.png") no-repeat center 0; height:30px; padding-bottom:10px; width:100%; margin:20px auto; float:left; > .divider:after < content:''; display:block; margin-top:19px; border-bottom:2px dotted #b38b0d; >

HTML Body

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> .divider !-- w ww . d e m o 2 s .c om --> background: aqua url("styles/images/divider-stars.png") no-repeat center 0; height:30px; padding-bottom: 10px; width: 100%; margin: 20px auto; float: left; > .divider:after < content: ''; display: block; margin-top:19px; border-bottom: 2px dotted #b38b0d; >  body> div >"divider">    

Related

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

Css css div center with border

Jsfiddle is here Question: I want to use something like the below image for div border: I do not want to center be stretched (for wide and high div). Here is an online svg editor The code below generates similar shape to what you seek.

How to center a character in a css3 div with rounded borders

Hey I hope you can help me. I am trying to center a number in a css3-div. I am using this:

border:2px solid #333333; padding:1px; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; background-color: #fff; height: 25px; width: 25px; 

How do I center it also with a single-digit charachter?

Assuming that the element is also display: block; (or display: inline-block; ) you can just add:

text-align: center; line-height: 25px; /* vertical height of the container/element */ 

Css — How to align div in center of a page?, I want a div which is centered vertically and horizontally i.e. in the centre of a page. I tried position: absolute and making the div’s top right bottom left 0! But the problem is when i zoom in the

Css tricks with div box and borders

I am trying to make a div that looks like this:

Is there a way to do this with css only?

I have been trying to play this idea in jsfiddle

.box < background-color : red; position : relative; display : block; height : 50px; width : 200px; text-align : center; margin : 0 auto; >.box p < padding : 0px; >.box::before < content: ''; height: 50px; width: 10px; background-color: blue; position: absolute; top: 0; left: 0px; transform: skewX(-10deg); transform-origin: top; -webkit-transform: skewX(-10deg); -webkit-transform-origin: 0 0; >.box::after

It looks like i can play with the left and right, but i do not know how to do it with the bottom.

I know of one way to do it, which is using svg. Here is an online svg editor

The code below generates similar shape to what you seek. Jsfiddle is here

Html — css vertical align li and border of the div, Hi i am trying to center vertically some li But as i put a border-top and border-bottom, it doesn t work anymore. I tried to change the value of 100 everywhere (more and less, combination,) but i cant make it work

CSS border-image with fixed center

I want to use something like the below image for div border:

I do not want to center be stretched (for wide and high div). How should I slice this photo that the center remains fixed?

border-style: solid; border-width: 41px 23px 46px 21px; -moz-border-image: url(6.png) 41 23 46 21 stretch repeat; -webkit-border-image: url(6.png) 41 23 46 21 stretch repeat; -o-border-image: url(6.png) 41 23 46 21 stretch repeat; border-image: url(6.png) 41 23 46 21 fill stretch repeat; 

1. Cut the top central part of the above image and draw using background-image .
2. Draw the left/right parts with :before and :after pseudo elements.

Output Image:

* body < background: linear-gradient(purple, white) no-repeat; min-height: 100vh; margin: 0; >.box < background-image: url("https://s30.postimg.org/r1e86dtr5/border_image.png"), url("https://s30.postimg.org/r1e86dtr5/border_image.png"); background-size: 288px 39px; background-repeat: no-repeat; background-position: center top, center bottom; padding: 40px 20px; position: relative; min-width: 300px; height: 250px; width: 500px; margin: 20px; >.box:before, .box:after < border-radius: 10px 0 0 10px; border: solid black; border-width: 2px 0 2px 2px; width: calc(50% - 142px); position: absolute; content: ''; bottom: 17px; top: 19px; left: 0; >.box:after

Css — How to set a border for an HTML div tag, Since the initial value of the border styles is ‘none’, no borders will be visible unless the border style is set. In other words, you need to set a border style (e.g. solid) for the border to show up. border:thin only sets the width. Also, the color will by default be the same as the text color (which normally doesn’t look good).

Источник

Все о свойстве border

Все знакомы с css параметром border, но есть ли вещи, которые мы не знаем о нем?

Основы

border-width: thick; border-style: solid; border-color: black;

Например у параметра border-width есть три параметра: thin, medium, thick:

Если необходимо менять цвет границы при наведении на объект:

Border-Radius

border-radius — это новый параметр CSS3 для отображения закругленных углов, который корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

Для каждого угла можно назначить свое закругление:

border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;

В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
Всю конструкцию можно сжать в одну строку:

/* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0;

Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.

Несколько границ

Border-Style

solid, dashed, and dotted — самые популярные значения параметра border-style, но давайте рассмотрим другие, например, groove and ridge.

border: 20px groove #e3e3e3;

border-color: #e3e3e3; border-width: 20px; border-style: groove;

Outline

Этот способ отлично работает, но ограничен созданием двойной рамки. Если вам необходимо отобразить несколько границ элемента, то необходимо использовать другую технику.

Псевдоэлементы

.box < width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; >/* Create two boxes with the same width of the container */ .box:after, .box:before < content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; >.box:after < border: 5px solid red; outline: 5px solid yellow; >.box:before

Возможно это не самое элегантное решение, однако оно работает

Box-Shadow

Изменение углов

border-radius: 50px / 100px; /* horizontal radius, vertical radius */

border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;

Эта техничка бывает полезна, если необходимо имитировать искривление, а не закругление. Например, так можно получить эффект скрученной бумаги:

CSS фигуры

Наиболее частым примером использования CSS фигур является отображение стрелок. Чтобы понять, как это работает, необходимо разобраться с использованием отдельного border-color для каждой стороны и установкой значения «0» для width и height:

А теперь оставляем только синий треугольник:

Создание Speech Bubble

Теперь нужно расположить стрелку-треугольник в нужном месте. Вот наш цветной квадратик:

Оставляем только четверть квадратика:

Теперь перемещаем ниже и закрашиваем:

.speech-bubble < /* … other styles */ border-radius: 10px; >.speech-bubble:after < content: ''; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; /* adjust for border width */ >

Примеры применения:

/* Speech Bubbles Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION 
Hi there
 */ .speech-bubble < position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; border-radius: 10px; font-family: sans-serif; >.speech-bubble:after < content: ''; position: absolute; width: 0; height: 0; border: 15px solid; >/* Position the Arrow */ .speech-bubble-top:after < border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px; >.speech-bubble-right:after < border-left-color: #292929; left: 100%; top: 50%; margin-top: -15px; >.speech-bubble-bottom:after < border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; >.speech-bubble-left:after

Вертикальное центрирование текста

минус использования line-height при вертикальном центрировании в ограничении текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:

.speech-bubble < /* other styles */ display: table; >.speech-bubble p

Еще один пример нестандартного использования границ:

Итог

Использование параметра border не ограничивается одним лишь «1px solid black», с помощью границ можно создавать различные фигуры, причем достаточно один раз написать CSS-класс и применять его к множеству элементов на странице.

Источник