Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you may not be able to execute some actions.

Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).

How do you put the image in the center of the diva?

morde last edited by

How do you put the image in the center of the diva?
Reply Quote 0
1 Reply Last reply
S
Saumya last edited by
1. div{text-align:center}
2. img{display:block;margin:0 auto}
3. div{background:url(img) center 0 no-repeat}
Reply Quote 0
1 Reply Last reply

css 19108

2
Posts

0
Views

Suggested Topics

Imaging several images in one.
Software Programming • c sharp wpf images bitmap • • Analeea

2

0
Votes

2
Posts

0
Views

J

using System.Windows.Media.Imaging; using System.Windows.Media; var files = new[] { @"c:\temp\1.jpg", @"c:\temp\2.jpg" }; var dv = new DrawingVisual(); using (var dc = dv.RenderOpen()) { double left = 0; foreach (var file in files) { var bi = new BitmapImage(new Uri(file, UriKind.Absolute)); dc.DrawImage(bi, new Rect(left, 0, bi.Width, bi.Height)); left += bi.Width; } } var rtb = new RenderTargetBitmap((int)dv.ContentBounds.Width, (int)dv.ContentBounds.Height, 96, 96, PixelFormats.Pbgra32); rtb.Render(dv); var en = new PngBitmapEncoder(); en.Frames.Add(BitmapFrame.Create(rtb)); using (var s = File.Create(@"C:\Temp\result.png")) en.Save(s);
O

how to give horizontal spaces between inputs with css?
Software Programming • css jsf primfac languagees • • Oba22

2

0
Votes

2
Posts

0
Views

A

The spaces can give them, using margins (sparking between elements) or paddings (space between the container and its contents):You can use it by classing those elements like this:.clase-elegida{ margin-left: 10px; margin-right: 10px; /*O usando los padding*/ padding-left: 10px; padding-right: 10px; } You can also use the short cutter, taking into account the needle sense of the relog (up, right, down, left), the next example is the same as above:.clase-elegida2{ margin: 0 10px 0 10px; padding: 0 10px 0 10px; } And in fact you can cut them shorter, as if you use only two, that is, (0 10px): means (up, down right, left). Example: <nav class="elemento"></nav> /*En el CSS*/ .elemento { margin: 0 10px; } You can also generate dynamic classes that you're adding to the elements whenever you need them like this: .ml_10px { margin-left: 10px} .mr_15px { margin-right: 15px} And in html: <div class="ml-10px"></div> <div class="mr-15px"></div> The disadvantage is that you have to create independent classes for each side or measure, it serves a lot for dynamic classes, which you are putting dynamically when you paint various elements at the time, is the model "bootstrap" But it's kind of cumbersome when you manually paint each element independently.The other is that you add it to each html element, using online styles:<section style="margin-left: 10px"> But it is not an option that recommends you only in exceptional cases or no alternative, as the code in this way is much more difficult to maintain and you have to be repeating the code in each element in an unnecessary way.
J

align image to the center over another image
Software Programming • html css wordpress bootstrap • • jules

2

0
Votes

2
Posts

0
Views

D

Have you tried to put a div inside the "img-fund" and in it you by the image of your logo? I think it could work, using the CSS to center it and even a class.
K

Place the text in the center of the image
Software Programming • html cs • • kalyn

2

0
Votes

2
Posts

0
Views

FlexBox: * { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; flex-flow: row wrap; } .container .block1, .container .block2 { position: relative; display: flex; flex: 1 0 50%; min-width: 320px; align-items: center; justify-content: center; padding: 10px 15px; } .container .block1 .text, .container .block2 .text { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; text-align: center; } .container .block1 .text p, .container .block2 .text p { color: #fff; font-size: 2em; font-weight: 400; text-transform: uppercase; } .container .block1 .img-responsive, .container .block2 .img-responsive { width: 100%; height: auto; }<body> <div class="container"> <div class="block1"> <div class="text"><p>left-block</p></div> <img src="http://placeimg.com/640/480/any/1" alt="" class="img-responsive" /> </div> <div class="block2"> <div class="text"><p>right-block</p></div> <img src="http://placeimg.com/640/480/any/2" alt="" class="img-responsive" /> </div> </div> </body>
G

How to organize an element to the right in a NavBar?
Software Programming • css html5 bootstrap • • gionna

2

0
Votes

2
Posts

0
Views

C

What you could do is pull the label li from the list ul and put it in another list ul with class ml-auto in this way:<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">JOMAR CONTROL</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Control de Asistencia </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Listado</a> <a class="dropdown-item" href="#">Registro</a> <a class="dropdown-item" href="#">Registros Eliminados</a> <a class="dropdown-item" href="#">Conteo de Asistencias</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Administrador </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Listado</a> <a class="dropdown-item" href="#">Registrar</a> <a class="dropdown-item" href="#">Eliminados</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Empleados </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Listado</a> <a class="dropdown-item" href="#">Registrar</a> <a class="dropdown-item" href="#">Eliminados</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Asistencias </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Listado</a> <a class="dropdown-item" href="#">Ingresar</a> <a class="dropdown-item" href="#">Eliminados</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Cargos </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Listado</a> <a class="dropdown-item" href="#">Ingresar</a> <a class="dropdown-item" href="#">Eliminados</a> </div> </li> <li class="nav-item dropdown pull-left"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Sedes </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Listado</a> <a class="dropdown-item" href="#">Ingresar</a> <a class="dropdown-item" href="#">Eliminados</a> </div> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Salir</a> </li> </ul> </div> </nav> I hope it serves you.
M

Source problems - PHP
Software Programming • html css • • magpie

2

0
Votes

2
Posts

0
Views

C

Maybe the problem is, it's two different pages! One is "principal.php," and the other is "tabla.php."
P

How do you do a circumference text with an image in the center of this circumference?
Software Programming • javascript html cs svg svg animation • • Pearlaqua

2

0
Votes

2
Posts

0
Views

The circumferential text is posted by a team: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath  <textPath xlink:href="#top" startOffset="9%"> БЦ 3,5 Ж ЭЦ 65.0 </textPath> See the comments in the code:<style> .container { width:25vw; height:auto; } </style> <div class="container"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" >  <path id="top" d="M50 200 A150 150 0 1 1 350 200" fill="none" stroke="#111111" stroke-width="2" />  <path id="bottom" d="M50 200 A150 150 0 1 0 350 200" fill="none" stroke="#111111" stroke-width="2" />  <circle cx="200" cy="200" r="198" fill="none" stroke="grey" stroke-width="4" /> <text dy="-12px" dx="0" font-size="36px" font-family="Times New Roman" font-weight="bold" fill="black" letter-spacing="6" >  <textPath xlink:href="#top" startOffset="9%"> БЦ 3,5 Ж ЭЦ 65.0 </textPath> </text> <text dy="32px" dx="0" font-size="34px" font-family="Comic Sans MS" font-weight="bold" fill="grey" letter-spacing="2" > <textPath xlink:href="#bottom" startOffset="3%"> 25.11.2021 30.11.2021 </textPath> </text> <image xlink:href="https://i.stack.imgur.com/Pk4l9.png" x="65" y="60" width="70%" height="70%" /> </svg> </div>Size the whole picture with a change-- width:25vw; in container styles.UpdateRotation animation option at introduction.container { width:25vw; height:auto; } #img{ transform-origin:center; transform-box:fill-box; -webkit-transition:-webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; } #img:hover { -webkit-transform: rotate(720deg); transform: rotate(720deg); }<div class="container"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" >  <path id="top" d="M50 200 A150 150 0 1 1 350 200" fill="none" stroke="#111111" stroke-width="2" />  <path id="bottom" d="M50 200 A150 150 0 1 0 350 200" fill="none" stroke="#111111" stroke-width="2" />  <circle cx="200" cy="200" r="198" fill="none" stroke="grey" stroke-width="4" /> <text dy="-12px" dx="0" font-size="36px" font-family="Times New Roman" font-weight="bold" fill="black" letter-spacing="6" >  <textPath xlink:href="#top" startOffset="9%"> БЦ 3,5 Ж ЭЦ 65.0 </textPath> </text> <text dy="32px" dx="0" font-size="34px" font-family="Comic Sans MS" font-weight="bold" fill="grey" letter-spacing="2" > <textPath xlink:href="#bottom" startOffset="3%"> 25.11.2021 30.11.2021 </textPath> </text> <image id="img" xlink:href="https://i.stack.imgur.com/Pk4l9.png" x="65" y="60" width="70%" height="70%" /> </svg> </div>
R

Why do browsers render the same page in different ways?
Software Programming • javascript html css navigator • • Rossere

2

0
Votes

2
Posts

0
Views

S

Within the browser, the part responsible for reading and interpreting HTML and CSS is called rendering engine or https://pt.wikipedia.org/wiki/Mecanismo_de_renderiza%C3%A7%C3%A3o ( rendering engine), and there are several different mechanisms on the market, so the page is presented differently.It can be said that the rendering engine is one of the main components of the browser, and some rendering engines became famous and began to be used by more than one browser.For example, https://pt.wikipedia.org/wiki/WebKit is used by https://pt.wikipedia.org/wiki/Safari_%28web_browser%29 (from Apple), and was used by https://pt.wikipedia.org/wiki/Opera and by Google Chrome until recently, when it was exchanged for https://pt.wikipedia.org/wiki/Blink_%28motor_de_layout%29 .There are still https://pt.wikipedia.org/wiki/Interpretador_de_JavaScript , whose goal is to interpret and execute the JavaScript codes of the page, and which are also reused by more than one browser, such as https://pt.wikipedia.org/wiki/V8_%28JavaScript%29 Google and https://en.wikipedia.org/wiki/SpiderMonkey and https://en.wikipedia.org/wiki/Rhino_%28JavaScript_engine%29 from Mozilla.
How do you put the image in the text?
Software Programming • python python 3.x • • emmalee

2

0
Votes

2
Posts

0
Views

F

Close the picture. base64 and keep it in the file.Use the module. base64:base64.b64encode - to codify the bikes base64 (Baytes impact)base64.b64decode - to develop the bikes base64 (Baytes impact)Example:import base64 file_name_img = 'img.jpg' file_name_txt = 'img.txt' with open(file_name_img, 'rb') as f: data = f.read() with open(file_name_txt, 'wb') as f: f.write(base64.b64encode(data)) Раскодирование из base64 with open(file_name_txt, 'rb') as f: img_data = base64.b64decode(f.read()) print(img_data[:100]) # Первые 100 байт
S

Load part of CSS on a page
Software Programming • css css3 • • Saumya

2

0
Votes

2
Posts

0
Views

E

Sii is possible with JQueryYou can bring the html you want and insert it in the DOMJS<script> var post=$.post('<?=$_SERVER['PHP_SELF']?>',{ funcion:'FUNCION' },function(msg){ $("body").append(msg); }); </script> PHP<? if($_POST["funcion"]=="FUNCION"){ ?> <style> /*ESTILOS*/ </style> <? exit(); } if($_POST["funcion"]=="FUNCION2"){ ?> <style> /*ESTILOS 2*/ </style> <? exit(); } ?>
M

How to edit SCSS
Software Programming • css cs3 sass scss • • meriah

2

0
Votes

2
Posts

0
Views

C

It's like scss is compiling on the server. So if you change the sss file, scss still changes to your sss. In the "reboot.scs 58 line, try to change the print.
S

How do I take that screen Scroll and make it responsive?
Software Programming • javascript html css responsive playout rolling • • simrah

2

0
Votes

2
Posts

0
Views

C

Add this to your styles : .container { max-height:100% !important; overflow:hidden; }
how to make a Grid or Flex
Software Programming • css flexbox grid scs • • morde

2

0
Votes

2
Posts

0
Views

K

.wrapper { display: grid; grid-gap: 10px; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(6, 1fr); } .items {border: 1px solid #000;} .items:nth-child(1) { grid-column-start: 1; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3; } .items:nth-child(2) { grid-column-start: 5; grid-column-end: 7; grid-row-start: 1; grid-row-end: 2; } .items:nth-child(3) { grid-column-start: 7; grid-column-end: 9; grid-row-start: 1; grid-row-end: 2; } .items:nth-child(4) { grid-column-start: 5; grid-column-end: 7; grid-row-start: 2; grid-row-end: 3; } .items:nth-child(5) { grid-column-start: 7; grid-column-end: 9; grid-row-start: 2; grid-row-end: 3; } .items:nth-child(6) { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; } .items:nth-child(7) { grid-column-start: 3; grid-column-end: 5; grid-row-start: 3; grid-row-end: 4; } .items:nth-child(8) { grid-column-start: 1; grid-column-end: 3; grid-row-start: 4; grid-row-end: 5; } .items:nth-child(9) { grid-column-start: 3; grid-column-end: 5; grid-row-start: 4; grid-row-end: 5; } .items:nth-child(10) { grid-column-start: 5; grid-column-end: 9; grid-row-start: 3; grid-row-end: 5; }<div class="wrapper"> <div class="items">1</div> <div class="items">2</div> <div class="items">3</div> <div class="items">4</div> <div class="items">5</div> <div class="items">6</div> <div class="items">7</div> <div class="items">8</div> <div class="items">9</div> <div class="items">10</div> </div>
How do you cross the language element on the website?
Software Programming • html jquery css • • Demir

2

0
Votes

2
Posts

0
Views

K

The question of the verb is reciprocated like that..dropbtn { padding: 5px; cursor: pointer; } /* The container <div> - needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; width: 140px; } .dropbtn { background: url('http://icons.iconarchive.com/icons/custom-icon-design/flag-3/16/Russia-Flag-icon.png') no-repeat left center; padding-left: 25px; width: 40px; } .dropbtn::after { background: rgba(0, 0, 0, 0) url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat scroll center center; content: ""; height: 16px; position: absolute; right: 0; top: 7px; width: 16px; } .dropdown-content a:first-child { background: url('http://icons.iconarchive.com/icons/custom-icon-design/flag-3/16/Russia-Flag-icon.png') no-repeat left center; } .dropdown-content a:last-child { background: url('https://icons.iconarchive.com/icons/fatcow/farm-fresh/16/flag-usa-icon.png') no-repeat left center; } /* Links inside the dropdown */ .dropdown-content a { color: black; padding: 2px 0 2px 25px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #f1f1f1} /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; } /* Change the background color of the dropdown button when the dropdown content is shown */<div class="dropdown"> <div class="dropbtn">RU</div> <div class="dropdown-content"> <a href="#">RU</a> <a href="#">EN</a> </div> </div>
C

How to put images in a slider.
Software Programming • javascript html cs • • chanisef

2

0
Votes

2
Posts

0
Views

R

Put min-width, max-width for slides.

How do you put the image in the center of the diva?

Suggested Topics

Imaging several images in one. Software Programming • c sharp wpf images bitmap • • Analeea

how to give horizontal spaces between inputs with css? Software Programming • css jsf primfac languagees • • Oba22

align image to the center over another image Software Programming • html css wordpress bootstrap • • jules

Place the text in the center of the image Software Programming • html cs • • kalyn

How to organize an element to the right in a NavBar? Software Programming • css html5 bootstrap • • gionna

Source problems - PHP Software Programming • html css • • magpie

How do you do a circumference text with an image in the center of this circumference? Software Programming • javascript html cs svg svg animation • • Pearlaqua

Why do browsers render the same page in different ways? Software Programming • javascript html css navigator • • Rossere

How do you put the image in the text? Software Programming • python python 3.x • • emmalee

Load part of CSS on a page Software Programming • css css3 • • Saumya

How to edit SCSS Software Programming • css cs3 sass scss • • meriah

How do I take that screen Scroll and make it responsive? Software Programming • javascript html css responsive playout rolling • • simrah

how to make a Grid or Flex Software Programming • css flexbox grid scs • • morde

How do you cross the language element on the website? Software Programming • html jquery css • • Demir

How to put images in a slider. Software Programming • javascript html cs • • chanisef

Imaging several images in one.
Software Programming • c sharp wpf images bitmap • • Analeea

how to give horizontal spaces between inputs with css?
Software Programming • css jsf primfac languagees • • Oba22

align image to the center over another image
Software Programming • html css wordpress bootstrap • • jules

Place the text in the center of the image
Software Programming • html cs • • kalyn

How to organize an element to the right in a NavBar?
Software Programming • css html5 bootstrap • • gionna

Source problems - PHP
Software Programming • html css • • magpie

How do you do a circumference text with an image in the center of this circumference?
Software Programming • javascript html cs svg svg animation • • Pearlaqua

Why do browsers render the same page in different ways?
Software Programming • javascript html css navigator • • Rossere

How do you put the image in the text?
Software Programming • python python 3.x • • emmalee

Load part of CSS on a page
Software Programming • css css3 • • Saumya

How to edit SCSS
Software Programming • css cs3 sass scss • • meriah

How do I take that screen Scroll and make it responsive?
Software Programming • javascript html css responsive playout rolling • • simrah

how to make a Grid or Flex
Software Programming • css flexbox grid scs • • morde

How do you cross the language element on the website?
Software Programming • html jquery css • • Demir

How to put images in a slider.
Software Programming • javascript html cs • • chanisef